点击select标签元素的时候,会弹出下拉。然而当option中没有元素时,就不希望弹出下拉(比如在某些浏览器中,点击select会默认出一个罩层效果,而此时没有数据选择的话,弹出比较不友好)。

  首先想到是利用click事件控制,发现仍然会有下拉出现...实际这个是mousedown事件控制的。

  这里就说明下click和mousedown、mouseup。规范要求,只有在同一个元素上相继触发 mousedown 和 mouseup 事件,才会触发 click 事件;如果 mousedown 或 mouseup 中的一个被取消,就不会触发 click 事件。

  这句话也很好理解,有时候我们在浏览网页时,鼠标在一个按钮或者链接上按下了,但是突然却又改了主意,此时我们一般会移开鼠标,在另一个空白处松开鼠标哈哈~相信这个大家经常上网都有经验。实际这个就利用了click事件要求在同一个元素相继触发mousedown 和 mouseup 事件。

  好了,来一段js代码: 这里利用了jquery  

<script type="text/javascript">
var len = 0;
$('#sel').mousedown(function(){
if(len == 0){// 模拟一下select标签没数据的标志
console.log('mousedown');
return false;
}
}).mouseup(function(){
console.log('mouseup');
}).click(function(){
console.log('click');
});
</script>

点击后发现,log的顺序是:mousedown-->mouseup-->click

当在mousedown中return false后,就不会弹出下拉或者罩层了...

这里再介绍下鼠标的各个事件:

DOM3 级事件中定义了9个鼠标事件,简介如下。
click:在用户单击主鼠标按钮(一般是左边的按钮)或者按下回车键时触发。这一点对确保易访问性很重要,意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。

dblclick:在用户双击主鼠标按钮(一般是左边的按钮)时触发。从技术上说,这个事件并不是DOM2级事件规范中规定的,但鉴于它得到了广泛支持,所以DOM3 级事件将其纳入了标准。

mousedown:在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。

mouseenter:在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件,但 DOM3级事件将它纳入了规范。IE、Firefox 9+和 Opera支持这个事件。

mouseleave:在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡,而且在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件,但 DOM3级事件将它 纳入了规范。IE、Firefox 9+和 Opera支持这个事件。

mousemove:当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。

mouseout:在鼠标指针位于一个元素上方,然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部,也可能是这个元素的子元素。不能通过键盘触发这个事件。

mouseover:在鼠标指针位于一个元素外部,然后用户将其首次移入另一个元素边界之内时触 发。不能通过键盘触发这个事件。

mouseup:在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。 页面上的所有元素都支持鼠标事件。除了 mouseenter 和 mouseleave,所有鼠标事件都会冒泡, 也可以被取消,而取消鼠标事件将会影响浏览器的默认行为。取消鼠标事件的默认行为还会影响其他事 件,因为鼠标事件与其他事件是密不可分的关系。

-

click事件和mousedown、mouseup事件的更多相关文章

  1. JavaScript区分click事件和mousedown(mouseup、mousemove)方法

    在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果.而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouse ...

  2. jquery事件 【mousedown与mouseup ----keydown与keypress与keyup】focus--blur--orrer--pageX-pageY

    <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> ...

  3. 移动端tap与click的区别 && 点透事件

    移动端的问题 移动端的主要问题是click会有300ms的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的300ms之后,才触发click,如果300ms之内还有c ...

  4. vue click.stop阻止点击事件继续传播

    <div id="app"> <div @click="dodo"> <button @:click="doThis&q ...

  5. WPF的路由事件、冒泡事件、隧道事件(预览事件)

    本文摘要: 1:什么是路由事件: 2:中断事件路由: 3:自定义路由事件: 4:为什么需要自定义路由事件: 5:什么是冒泡事件和预览事件(隧道事件): 1:什么是路由事件 WPF中的事件为路由事件,所 ...

  6. javaScript事件(五)事件类型之鼠标事件

    一.事件 二.事件流 以上内容见:javaScript事件(一)事件流 三.事件处理程序 四.IE事件处理程序 以上内容见javaScript事件(二)事件处理程序 五.事件对象 以上内容见javaS ...

  7. 5事件DOM零级事件跟DOM二级事件

    事件的行为传播,行为本身跟事件绑定没有关系:1.全新认识事件(某一个具体的行为)->行为本身:浏览器天生自带的一些行为操作->click,mouseover(mouseenter),mou ...

  8. JS怎样将拖拉事件与点击事件分离?

    帖子:http://bbs.csdn.net/topics/390785395?page=1#post-397369340 怎样将拖拉事件跟点击事件分离? 须要做到:拖拉时不触动点击事件 <ht ...

  9. 《JAVASCRIPT高级程序设计》事件委托和模拟事件

    由于事件处理程序可以为现代web应用提供交互能力,因此许多开发人员不分青红皂白向页面中添加大量的处理程序:这在某些语言中不会导致问题,但是在javascript,事件处理程序数量直接关系到页面的整体运 ...

随机推荐

  1. 【读书笔记】iOS-Interface Builder

    IBOutlet或IBAction符号对编译不产生任何影响,它们只是标记,用于告诉Xcode这些对象可以和UI控件进行关联,以便于在编辑Interface Builder上的UI控件的时候Xcode可 ...

  2. C# 6 元组应用 Part 1:方便的字典工厂方法

    首先是简单的实现: public static class CollectionExtensions { public static IDictionary<TKey, TValue> M ...

  3. api接口签名认证的一种方式

    请求方 try { using (var client = new HttpClient()) { StringContent content = new StringContent(strParam ...

  4. 二层协议--STP协议总结

    生成树协议的技术实现与配置注意点 一.stp协议的用途 二.stp协议的运行机制 三.stp协议规范

  5. 【第二篇】SAP ABAP7.5x新语法之OPEN SQL

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:SAP ABAP7.5x系列之OPEN SQL ...

  6. python装饰器的实现

    说起装饰器我们可能已经很熟悉了(不了解的可以查看python基础学习——装饰器),随手就可以写一个简单的装饰器 def decorator(func): def inner(*args, **kwar ...

  7. 【待补充】[HDFS_3] HDFS 工作机制

    0. 说明 HDFS 初始化文件系统分析 && HDFS 文件写入流程 && HDFS 文件读取流程分析 有价值的相关文章: [漫画解读]HDFS存储原理 1. HDF ...

  8. Python基础知识:字典

    1.字典中键-值为一对,keys()返回一个列表,包含字典中所有键,values()返回所有值 favorite_languages ={ 'jack':"python", 'al ...

  9. 4.4Python数据类型(4)之字符串函数

    返回总目录 目录: 1.字符串的查找计算 2.字符串的转换 3.字符串的填充压缩 4.字符串的分割拼接 5.字符串的判定 (一)字符串的查找计算 (1)len(str)计算字符串的总数 (2)find ...

  10. 联想笔记本Y7000P安装nvidia,cuda,tensorflow,pytorch

    Y7000P电脑环境i7处理器,1060显卡,16g内存,win10家庭版(系统版本号1809),在联想官网升级过bios,所有驱动都是最新.(截止时间点2019年3月1日) python3.5 安装 ...