概念
个人理解:
jQuery鼠标点击事件是最常用的事件之一,当用户使用鼠标在浏览器窗口或元素上进行点击交互时触发的事件,都属于鼠标点击事件的范围。常见的鼠标操作有:单击、双击、右键等等。
click() 事件函数
说明:
当用户单击鼠标左键时触发click()
函数,每触发一次匹配元素的click
事件,该事件函数就会被调用。
语法:
触发被选元素的click
事件:
$(selector).click()
添加函数到click
事件:
$(selector).click(function)
解释:
click()
函数的参数为回调函数,可选项,当click
事件发生时运行的函数。
示例:
<!DOCTYPE html><html><head><meta charset="utf-8"> <script src="jquery.min.js"></script><script>$(document).ready(function(){$("p").click(function(){alert("段落被点击了。");});});</script></head><body><p>点击这个段落。</p></body></html>
dblclick() 事件函数
说明:
当用户双击鼠标左键时触发dblclick()
事件,dblclick()
方法触发dblclick
事件,或规定当发生dblclick
事件时运行的函数。dblclick
事件也会产生click
事件。如果这两个事件都被应用于同一个元素,则会产生问题。
语法:
触发被选元素的dblclick
事件:
$(selector).dblclick()
添加函数到dblclick
事件:
$(selector).dblclick(function)
解释:
dblclick()
函数的参数是一个回调函数,可选项,当dblclick
事件触发时运行该函数。
示例:
<!DOCTYPE html><html><head><meta charset="utf-8"> <script src="jquery.min.js"></script><script>$(document).ready(function(){$("p").dblclick(function(){alert("这个段落被双击。");});});</script></head><body><p>双击这个段落。</p></body></html>
鼠标右击事件
在jQuery中没有提供鼠标右击事件函数,我们可以通过其他函数来事件鼠标右击事件的监听。
方法一: 使用contextmenu事件
代码示例:
点击鼠标右键禁止出现默认菜单
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$(document).contextmenu(function(e){e.preventDefault();//阻止默认行为console.log('this:'+this);console.log('e:'+e);console.log('e.target:'+e.target);});});</script></head><body></body></html>
解释:
使用contextmenu事件自定义右键弹出菜单,使用event对象的preventDefault()函数阻止默认行为的发生,即可间接实现鼠标右键控制。
方法二:使用bind事件绑定
代码示例:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$(document).bind("contextmenu", function (e) {e.preventDefault();//阻止默认行为console.log('this:'+this);console.log('e:'+e);console.log('e.target:'+e.target);});});</script></head><body></body></html>
mousedown()&mouseup() 事件函数
说明:
当鼠标指针移动到元素上方,并按下鼠标左键时,会发生 mousedown 事件。mousedown() 方法触发 mousedown 事件,或添加当发生 mousedown 事件时运行的函数。
当鼠标指针移动到元素上方,并松开鼠标左键时,会发生 mouseup 事件。mouseup() 方法触发 mouseup 事件,或添加当发生 mouseup 事件时运行的函数。
该方法通常mousedown()
与mouseup()
方法一起使用。
语法:
触发被选元素的mousedown
与mouseup
事件:
$(selector).mousedown()$(selector).mouseup()
添加函数到mousedown
与mouseup
事件:
$(selector).mousedown(function)$(selector).mouseup(function)
解释:
mousedown()
和mouseup()
函数的参数是一个回调函数,可选项,当mousedown
事件或mouseup
事件被触发时运行相应的回调函数。
示例:
<!DOCTYPE html><html><head><meta charset="utf-8"> <script src="jquery.min.js"></script><script>$(document).ready(function(){$("div").mouseup(function(){$(this).after("<p style='color:green;'>释放鼠标按钮。</p>");});$("div").mousedown(function(){$(this).after("<p style='color:purple;'>按下鼠标按钮。</p>");});});</script></head><body><div>在这个 div 元素中按下和释放鼠标按钮。</div></body></html>
监听鼠标按键
我们在实现某些特定的需求时,需要监听到鼠标点击,并且要知道是鼠标的哪个键被按下,针对这样的需求,我们可以通过鼠标按下事件mousedown
来事件监听。
示例:
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><script src="jquery.min.js"></script><script type="text/javascript">$(document).ready(function(){$(document).mousedown(function(e) {// 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键console.log(e.which);})});</script></head><body></body></html>
经验分享
鼠标点击事件在做网页特效开发时是最常用的事件之一,也是实现用户交互的基本事件,所以掌握好常用的鼠标点击事件,对以后做网页中的特效有很大的帮助。
微信交流:zzxingyun