首页 > 代码库 > 深入学习jQuery鼠标事件
深入学习jQuery鼠标事件
目录
[1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置前面的话
鼠标事件是DOM事件中最常用的事件，jQuery对鼠标事件进行了封装和扩展。本文将详细介绍jQuery鼠标事件
类型
鼠标事件共10类，包括click、contextmenu、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter和mouseleave
click 当用户按下并释放鼠标按键或其他方式“激活”元素时触发contextmenu 可以取消的事件，当上下文菜单即将出现时触发。当前浏览器在鼠标右击时显示上下文菜单dblclick 当用户双击鼠标时触发mousedown 当用户按下鼠标按键时触发mouseup 当用户释放鼠标按键时触发mousemove 当用户移动鼠标时触发mouseover 当鼠标进入元素时触发mouseout 当鼠标离开元素时触发mouseenter 类似mouseover，但不冒泡mouseleave 类似mouseout，但不冒泡
写法
以上10类鼠标事件，都有对应的写法。下面以click()事件为例，来说明鼠标事件的写法
【1】click(handler(eventObject))
click()事件是bind()事件的简写形式，可以接受一个事件处理函数作为参数
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height:30px;width:200px;border:1px solid black"></div><script>$(‘#box‘).click(function(){ $(this).css(‘background‘,‘lightblue‘)})</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/whzd3bh6" frameborder="0" width="320" height="240"></iframe>
【2】click([eventData],handler(eventObject))
click()事件可以接受两个参数，第一个参数传递数据，第二个参数是处理函数
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height:30px;width:200px;border:1px solid black"></div><script>$(‘#box‘).click(123,function(event){ alert(event.data);})</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/cnnbuk4e" frameborder="0" width="320" height="240"></iframe>
【3】click()
click()事件不带参数时，变成click()方法，是trigger(‘click‘)的简写形式
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><button id="btn1">按钮一</button><button id="btn2">按钮二</button><script>$(‘#btn1‘).on(‘click‘,function(){ alert(1);});$(‘#btn2‘).on(‘click‘,function(){ $(‘#btn1‘).click();});</script>
<iframe style="width: 100%; height: 40px;" src="http://sandbox.runjs.cn/show/g8sormoy" frameborder="0" width="320" height="240"></iframe>
合成事件
jQuery事件对鼠标事件进行了扩展，自定义了两个合成事件——hover()和toggle()
[注意]toggle()事件已经在jQuery1.8版本删除
hover()
hover(enter,leave)事件用于模拟光标悬停事件。鼠标移入时，触发第一个函数参数；鼠标移出时，触发第二个函数参数
hover()事件实际上是mouseenter事件和mouseleave事件的集合
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height:30px;width:200px;border:1px solid black"></div><script>$(‘#box‘).on(‘mouseenter‘,function(event){ $(this).css(‘background-color‘,‘lightblue‘);})$(‘#box‘).on(‘mouseleave‘,function(event){ $(this).css(‘background-color‘,‘transparent‘);})</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/1p3rkf1f" frameborder="0" width="320" height="240"></iframe>
用hover()事件实现如下
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height:30px;width:200px;border:1px solid black"></div><script>$(‘#box‘).hover(function(){ $(this).css(‘background-color‘,‘lightblue‘);},function(){ $(this).css(‘background-color‘,‘transparent‘);})</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/znlckvpi" frameborder="0" width="320" height="240"></iframe>
当hover()事件只有一个参数时，该参数为mouseenter和mouseleave事件共同的函数
<style>.active{background-color:lightblue;}</style><script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height:30px;width:200px;border:1px solid black"></div><script>$(‘#box‘).hover(function(){ $(this).toggleClass(‘active‘)})</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/ybftjwdq" frameborder="0" width="320" height="240"></iframe>
toggle()[已删除]
toggle()事件用于模拟鼠标连续单击事件。第1次单击，触发第1个函数参数；第2次单击，触发第2个函数函数；如果有更多函数，则依次触发，直到最后一个。随后的每次单击都重复对这几个函数轮番调用
鼠标按键
事件对象event的which属性用于区分哪个键被按下，敲击鼠标左键which的值是1，敲击鼠标中键which的值是2，敲击鼠标右键which的值是3
[注意]所有浏览器都不支持中键
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height:30px;width:200px;border:1px solid black"></div><script>$(‘#box‘).mousedown(function(event){ alert(event.which)})</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/435xcgqf" frameborder="0" width="320" height="240"></iframe>
修改键
在按下鼠标时键盘上的某些键的状态可以影响到所要采取的操作，这些修改键就是Shift、Ctrl、Alt和Meta(在Windows键盘中是Windows键，在苹果机中是Cmd键)，它们经常被用来修改鼠标事件的行为
jQuery参照DOM规定了4个属性，表示这些修改键的状态：shiftKey、ctrlKey、altKey和metaKey。这些属性中包含的都是布尔值，如果相应的键被按下了，则值为true；否则值为false
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height:30px;width:200px;border:1px solid black"></div><script>$(‘#box‘).click(function(event){ $(‘#box‘).html(); if(event.shiftKey){$(‘#box‘).html(‘shiftKey;‘) } if(event.ctrlKey){$(‘#box‘).html(‘ctrlKey;‘) } if(event.altKey){$(‘#box‘).html(‘altKey;‘) } if(event.metaKey){$(‘#box‘).html(‘metaKey;‘) }})</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/v5xmwprb" frameborder="0" width="320" height="240"></iframe>
坐标位置
关于坐标位置，DOM事件对象提供了clientX/Y、pageX/Y、screenX/Y、x/y、offsetX/Y、layerX/Y这6对信息，但各浏览器实现情况差异很大
jQuery关于坐标位置，提供了clientX/Y、offsetX/Y、screenX/Y、pageX/Y这四对信息
clientX/Y
clientX/Y表示鼠标指针在可视区域中的水平和垂直坐标
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height:30px;width:200px;border:1px solid black"></div><script>$(‘#box‘).mousemove(function(event){ $(‘#box‘).html(function(index,oldHtml){ return ‘clientX:‘ + event.clientX +‘;clientY:‘+event.clientY });})</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/s2y6hhzq" frameborder="0" width="320" height="240"></iframe>
offsetX/Y
offsetX/Y表示相对于定位父级的水平和垂直坐标
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height:30px;width:400px;border:1px solid black"></div><script>$(‘#box‘).mousemove(function(event){ $(‘#box‘).html(function(index,oldHtml){ return ‘clientX:‘ + event.clientX +‘;clientY:‘+event.clientY + ‘offsetX:‘ + event.offsetX +‘;offsetY:‘+event.offsetY });})</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/zvkrnmfo" frameborder="0" width="320" height="240"></iframe>
screenX/Y
screenX/Y表示鼠标指针相对于屏幕的水平和垂直坐标
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height:30px;width:400px;border:1px solid black"></div><script>$(‘#box‘).mousemove(function(event){ $(‘#box‘).html(function(index,oldHtml){ return ‘clientX:‘ + event.clientX +‘;clientY:‘+event.clientY + ‘screenX:‘ + event.screenX +‘;screenY:‘+event.screenY });})</script>
<iframe style="width: 100%; height: 50px;" src="http://sandbox.runjs.cn/show/cu5esqe9" frameborder="0" width="320" height="240"></iframe>
pageX/Y
pageX/Y表示相对于页面的水平和垂直坐标，它与clientX/clientY的区别是不随滚动条的位置变化
<body style="height:2000px;"><script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script><div id="box" style="height:100px;width:300px;background:pink;"></div><div id="result"></div><script>$(‘#box‘).mousemove(function(event){ $(‘#result‘).html(function(index,oldHtml){ return ‘clientX:‘ + event.clientX +‘;clientY:‘+event.clientY + ‘pageX:‘ + event.pageX +‘;pageY:‘+event.pageY });})</script></body>
<iframe style="width: 100%; height: 200px;" src="http://sandbox.runjs.cn/show/j9jiqyza" frameborder="0" width="320" height="240"></iframe>
<script type="text/javascript">// 0){ return; } if(select[i].getBoundingClientRect().top <= 0 && select[i+1]){ if(select[i+1].getBoundingClientRect().top > 0){ change(oCon.children[i+2]) } }else{ change(oCon.children[select.length+1]) } }}document.body.onmousewheel = wheel;document.body.addEventListener(‘DOMMouseScroll‘,wheel,false);var oCon = document.getElementById("content");var close = oCon.getElementsByTagName(‘span‘)[0];close.onclick = function(){ if(this.innerHTML == ‘显示目录‘){ this.innerHTML = ‘ב; this.style.background = ‘‘; oCon.style.border = ‘2px solid #ccc‘; oCon.style.width = ‘‘; oCon.style.height = ‘‘; oCon.style.overflow = ‘‘; oCon.style.lineHeight = ‘30px‘; }else{ this.innerHTML = ‘显示目录‘; this.style.background = ‘#3399ff‘; oCon.style.border = ‘none‘; oCon.style.width = ‘60px‘; oCon.style.height = ‘30px‘; oCon.style.overflow = ‘hidden‘; oCon.style.lineHeight = ‘‘; }}for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].onmouseover = function(){ this.style.color = ‘#3399ff‘; } oCon.children[i].onmouseout = function(){ this.style.color = ‘inherit‘; if(this.mark){ this.style.color = ‘#3399ff‘; } } oCon.children[i].onclick = function(){ change(this); } }function change(_this){ for(var i = 2; i < oCon.children.length; i++){ oCon.children[i].mark = false; oCon.children[i].style.color = ‘inherit‘; oCon.children[i].style.textDecoration = ‘none‘; oCon.children[i].style.borderColor = ‘transparent‘; } _this.mark = true; _this.style.color = ‘#3399ff‘; _this.style.textDecoration = ‘underline‘; _this.style.borderColor = ‘#2175bc‘; }// ]]></script><script type="text/javascript" src="http://files.cnblogs.com/files/xiaohuochai/contextMenu.js"></script>深入学习jQuery鼠标事件