点击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. linux -bash . startup.sh Permission denied

    在执行./startup.sh,或者./shutdown.sh的时候,爆出了Permission denied, 其实很简单,就是今天在执行tomcat的时候,用户没有权限,而导致无法执行, 用命令c ...

  2. 【代码笔记】Web-HTML-头部

    代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <!--ti ...

  3. 【读书笔记】iOS-多点触摸事件与界面几何

    边缘与中心检测: CGRectGetMinX 返回矩形左边缘的坐标. CGRectGetMinY 返回矩形底部边缘的坐标. CGRectGetMidX 返回矩形中心的x坐标. CGRectGetMid ...

  4. python练习(-)

    简单的爬虫示例: import urllib.request #python2.x版本为urllib2url = 'http://www.douban.com/'webPage=urllib.requ ...

  5. 自定义ScrollView 实现上拉下拉的回弹效果--并且子控件中有Viewpager的情况

    onInterceptTouchEvent就是对子控件中Viewpager的处理:左右滑动应该让viewpager消费 public class MyScrollView extends Scroll ...

  6. 用Python实现数据结构之栈

    栈 栈是最简单的数据结构,也是最重要的数据结构.它的原则就是后进先出(LIFO),栈被使用于非常多的地方,例如浏览器中的后退按钮,文本编辑器中的撤销机制,接下来我们用Python来具体实现这个数据结构 ...

  7. 在Centos7下搭建Git服务器

    ① 安装 Git ② 服务器端创建 git 用户,用来管理 Git 服务,并为 git 用户设置密码 ③ 服务器端创建 Git 仓库 ④ 客户端 clone 远程仓库 ⑤ 客户端创建 SSH 公钥和私 ...

  8. if 嵌套if 的先后顺序的区别 (自测)

    # 验证 verify very good! # username = input("请输入用户名").capitalize()# password = input("请 ...

  9. golang的一些基础数据类型转换

    int -- string //string到int value_int,err:=strconv.Atoi(string) //int到string str:=strconv.Itoa(value_ ...

  10. 用navicat手动删除了数据表的记录,再次写入的时候,怎么让id重新从1开始?

    问:用navicat手动删除了mariadb数据表的记录,再次写入的时候,自增id会继续,不会从1开始. 比如,原来有10条记录,全部清空,再次写入数据,id会从11开始,怎么让他重新从1开始呢? 重 ...