Android触摸事件和mousedown、mouseup、click事件之间的关系

2019-07-31| 发布者: admin| 查看: |

1、touch事件简介

pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件,但是在移动终端如iphone、ipod touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel事件,分别对应了触屏开始、拖拽及完成触屏事件和取消。

2、touch事件与mouse事件的出发关系

在触屏操作后,手指提起的一刹那,系统会判断接收到事件的element的内容是否被改变,如果内容被改变,接下来的事 件都不会触发,如果没有改变,会按照mousedown,mouseup,click的顺序触发事件。特别需要提到的是,只有再触发一个触屏事件时,才会 触发上一个事件的mouseout事件。

二、mousedown、mouseup、click事件之间的关系

点击select标签元素的时候,会弹出下拉。然而当option中没有元素时,就不希望弹出下拉。

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

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

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

 script type="text/javascript" 
 var len = 0;
 $.mousedown{
 if{// 模拟一下select标签没数据的标志
 console.log;
 return false;
 }).mouseup{
 console.log;
 }).click{
 console.log;
 /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,所有鼠标事件都会冒泡, 也可以被取消,而取消鼠标事件将会影响浏览器的默认行为。取消鼠标事件的默认行为还会影响其他事 件,因为鼠标事件与其他事件是密不可分的关系。

若有不足请多多指教!希望给您带来帮助!

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对萬仟网的支持。如果你想了解更多相关内容请查看下面相关链接