鼠标事件大汇总

今儿个来佛一佛（fo）鼠标事件的那些不得不说的事。

话说啊，这个鼠标事件，总共还是挺多的，7种勒，当然不包括H5的一大堆新的事件属性哈。那些东西暂时还不是很兼容，就不多扯啦。

罗列一下：

onclick:经常地不行被用

ondbclick:反正我没用过，这又不是桌面应用，。。

onmousedown:就是当你鼠标点下去就触发的事件，其实还是挺常用的。而且重要的一点是支持左、中、右键点击。顺带提一下，click和dbclick不支持右键。

onmouseup：顾名思义咯，就是松开的时候触发。有意思的是触发的时候并不是看你从哪点的，而是你松开的时候指针在哪。一般的话用来防误点，如果不小心点错了，按住别送拖到一边去就OK了。

onmousemove：这个就更有意思了，是你鼠标移动就触发的一个事件属性——当然是在你加了onmousemove的元素上才会。大概用来做游戏吧。我没用过。

onmouseover：恩，这个就是鼠标移入事件啦。

onmouseout：鼠标移出事件。

 

————————————————————————————————华丽的分割线——————————————————————————————————————————————

 

其实应该说这是鼠标滑动和点击相关的7类事件，而不是鼠标事件。而且我们用到最多的也不过是那么几种而已。

但是有句话说的好，存在既有意义。就像html的menu标签一样，虽然介绍是主流浏览器均不支持。而且我也不知道它到底有什么卵用，但是它既然存在了，那就存在吧。。。

哈哈，其实上述7类事件是比较简单的了，有些套路的话多用用也就都熟悉了，但是接下来的，就让人很蛋疼了。

首先说下拖拽吧，这个炫酷的时代，如果你的弹窗或者modal连拖都不能拖得多low？

那么就少不得要跟H5新增的那些mouse事件属性打交道了，先罗列一下：

按我们的操作顺序来，首先：

ondrag：on呢，就是这个on的on，drag呢，就是这个ondrag的drag，它的属性呢，就是元素被拖动时的触发事件，是拖动系列事件的主要事件，用来做跟随效果。

ondragstart：看名字就知道了，拖动开始的时候执行的事件。

ondragend：同理，拖动结束执行的事件。

在w3c的解释里，分别是拖动操作开端和末端运行的脚本。这句话呢比较难以理解，因为开端和末端是一个比较模糊的概念。所以我直接使用了开始和结束两个词。正如其意，就是在拖动的一瞬间和拖动结束也就是放开鼠标的一瞬间执行的事件。这一对事件属性其实用到的并不多。例如，开拖得时候在原地留下一个影子，放开的时候影子消失。

顺理成章，也就有了如下属性：

ondragenter：当元素来到有效拖放目标的时候触发的事件。

ondragleave：当元素离开有效拖放目标的时候触发的事件。

ondragover：当元素在有效拖放目标上拖动时触发的事件。

其实这三兄弟还有个老爹，叫做

ondrog：当元素正在被拖放时触发的事件。也就是拖放全程都触发的事件。

注意了，这可和它老弟ondrag不一样，一个是拖放，一个是拖动，针对的是两类事件。至于为什么三兄弟跟老叔混。。。你猜

 

————————————————————————————————又一道华丽的分割线——————————————————————————————————————————————

 

好的，终于轮到滚轮兄了。

onmousewheel：当鼠标滚轮滚动的时候触发的事件属性。

onscroll：当元素滚动条卷动的时候触发的事件属性。

其实这两个的使用范围更加的小。通常的话，onmousewheel被用作触发加载的事件属性，例如瀑布流的下拉加载。当然使用onscroll也是没有问题的，只不过onscroll的适用范围更加的广泛一点。一般来说都会使用在播放视频或者音频的时候，也会使用在一些独立窗口的滚动条监听。当然，onmousewheel的作用也有不可替代性。在此不多谈。

 

拜拜我的分割线童鞋

 

其实到这的话就已经结束了，mouse事件已经都讲完了。但是呢，做事总要有始有终，移动端的事件不讲一讲也是不太好。如果重开一篇的话也够费劲的，so，放下面了。

 

移动端的屏幕触发事件共有四个：

touchstart：在手指触碰到元素的时候触发事件，而且是无论你是否已经有一根手指触碰到了元素。如果有，那就再触发一次。

touchmove：手指滑动事件。顾名思义，在手指滑动屏幕的时候触发的事件属性。

touchend：离开时触发的。跟onmouseup一样，同样具有从哪里离开触发哪个元素的特性，而不是从哪开始。

touchcancel：当系统停止跟踪touchmove是触发。怎么个意思呢？比如你手指向左滑动屏幕，页面跟着向左划，当你的手指划出屏幕边界的时候，如果没有一个touchend怎么办？页面停在那。而这个时候　　　　 　　　　　　touchcancel的作用就体现出来了。触发touchcancel，判断页面与边界距离，执行预定事件。

 

事件就是这么四个事件，用法也就是那么着用着。可是总也少点什么？巧妇难为无米之炊不是？

就像PC端event要配合诸如width等属性来使用一样，移动端也有一套自己的属性，如下：

clientX/clientY：获取元素与view的距离，什么意思呢？就跟display：fixed的视口距离一样的意思。

pageX/pageY：获取元素与页面的距离。不用多说，就是element的距离了。

screenX/svreenY：这个就有意思了，不是浏览器也不是视口更不是页面，而是屏幕距离。很惊讶？其实PC端也有此属性，只是实在很少用，估计知道的人都不多吧。但是移动端可就有大用了，尤其是app。

identity：这个就更有意思了，我们都知道我们在做表单啦或者标签啦什么的都会给个id，也就是唯一标识符，用来标识某元素或者某条数据，但是事件也有id是不是很傻眼？但是这可是有大用的！我们都知道，现在多　　　　点触控已经普及，甚至没人关心了，因为如果不是多点触控才有鬼了。那么当我们多根手指同时操作的时候如何来区分呢？这就是identity的工作了，每当我们的某一根手指接触屏幕的时候系统都会自动分配　　　　一个identity给这根手指。当然系统是记不住你的每根手指长什么样的，所以手指离开就清楚了，再接触的时候会再次分配。如此，多点触控才能有序进行。

 

最后，在加一个PC端不常用但是移动端经常用的东西。

event.preventDefault(); 阻止默认事件。PC端我们有多种方法来阻止默认事件，例如return false等。而移动端最常用的就是这个event.preventDefault();了。比如在touchmove的时候。

 

好了，基本上所有的点击或者类点击行为已经介绍过了，移动端还介绍了一点配套的东西，至于PC端，问度娘吧。

正好也下班了。。啊  好累啊~~