JQuery实用教程

文章8 |   阅读 5096 |   点赞0

来源：https://blog.csdn.net/p445098355/category_9668651.html

jQuery鼠标点击事件

转x33g5p2x  于2022-03-06 转载在 其他  
字(3.9k)|赞(0)|评价(0)|浏览(614)

概念

个人理解：

jQuery鼠标点击事件是最常用的事件之一，当用户使用鼠标在浏览器窗口或元素上进行点击交互时触发的事件，都属于鼠标点击事件的范围。常见的鼠标操作有：单击、双击、右键等等。

click() 事件函数

说明：

当用户单击鼠标左键时触发click()函数，每触发一次匹配元素的click事件，该事件函数就会被调用。

语法：

触发被选元素的click事件：

  1. $(selector).click()

添加函数到click事件：

  1. $(selector).click(function)

解释：

click()函数的参数为回调函数，可选项，当click事件发生时运行的函数。
示例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"> 
  5.         <script src="jquery.min.js"></script>
  6.         <script>
  7.             $(document).ready(function(){
  8.               $("p").click(function(){
  9.                alert("段落被点击了。");
  10.               });
  11.             });
  12.         </script>
  13.     </head>
  14.     
  15.     <body>
  16.     	<p>点击这个段落。</p>
  17.     </body>
  18. </html>

dblclick() 事件函数

说明：

当用户双击鼠标左键时触发dblclick()事件，dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数。dblclick 事件也会产生 click 事件。如果这两个事件都被应用于同一个元素，则会产生问题。

语法：

触发被选元素的 dblclick 事件：

  1. $(selector).dblclick()

添加函数到 dblclick 事件：

  1. $(selector).dblclick(function)

解释：

dblclick()函数的参数是一个回调函数，可选项，当dblclick事件触发时运行该函数。
示例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"> 
  5.         <script src="jquery.min.js"></script>
  6.         <script>
  7.             $(document).ready(function(){
  8.               $("p").dblclick(function(){
  9.                alert("这个段落被双击。");
  10.               });
  11.             });
  12.         </script>
  13.     </head>
  14.     
  15.     <body>
  16.     	<p>双击这个段落。</p>
  17.     </body>
  18. </html>

鼠标右击事件

在jQuery中没有提供鼠标右击事件函数，我们可以通过其他函数来事件鼠标右击事件的监听。
方法一： 使用contextmenu事件

代码示例：

点击鼠标右键禁止出现默认菜单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <script src="jquery.min.js"></script>
  6.         <script type="text/javascript">
  7.             $(document).ready(function(){
  8.                 $(document).contextmenu(function(e){
  9.                     e.preventDefault();//阻止默认行为
  10.                     console.log('this:'+this);
  11.                     console.log('e:'+e);
  12.                     console.log('e.target:'+e.target);
  13.                 });	
  14.             });
  15.         </script>
  16.     </head>
  17.     
  18.     <body>
  19.     </body>
  20. </html>

解释：

使用contextmenu事件自定义右键弹出菜单，使用event对象的preventDefault()函数阻止默认行为的发生，即可间接实现鼠标右键控制。
方法二：使用bind事件绑定

代码示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <script src="jquery.min.js"></script>
  6.         <script type="text/javascript">
  7.         $(document).ready(function(){
  8.             $(document).bind("contextmenu", function (e) {
  9.                 e.preventDefault();//阻止默认行为
  10.                 console.log('this:'+this);
  11.                 console.log('e:'+e);
  12.                 console.log('e.target:'+e.target);
  13.             });
  14.         });
  15.         </script>
  16.     </head>
  17.     
  18.     <body>
  19.     </body>
  20. </html>

mousedown()&mouseup() 事件函数

说明：

当鼠标指针移动到元素上方，并按下鼠标左键时，会发生 mousedown 事件。mousedown() 方法触发 mousedown 事件，或添加当发生 mousedown 事件时运行的函数。

当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件。mouseup() 方法触发 mouseup 事件，或添加当发生 mouseup 事件时运行的函数。

该方法通常mousedown()与 mouseup() 方法一起使用。
语法：

触发被选元素的 mousedown与mouseup 事件：

  1. $(selector).mousedown()
  2. $(selector).mouseup()

添加函数到 mousedown与mouseup 事件：

  1. $(selector).mousedown(function)
  2. $(selector).mouseup(function)

解释：

mousedown()和mouseup()函数的参数是一个回调函数，可选项，当 mousedown 事件或mouseup事件被触发时运行相应的回调函数。
示例：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"> 
  5.         <script src="jquery.min.js"></script>
  6.         <script>
  7.             $(document).ready(function(){
  8.               $("div").mouseup(function(){
  9.                 $(this).after("<p style='color:green;'>释放鼠标按钮。</p>");
  10.               });
  11.               $("div").mousedown(function(){
  12.                 $(this).after("<p style='color:purple;'>按下鼠标按钮。</p>");
  13.               });
  14.              });
  15.         </script>
  16.     </head>
  17.     
  18.     <body>
  19.     	<div>在这个 div 元素中按下和释放鼠标按钮。</div>
  20.     </body>
  21. </html>

监听鼠标按键

我们在实现某些特定的需求时，需要监听到鼠标点击，并且要知道是鼠标的哪个键被按下，针对这样的需求，我们可以通过鼠标按下事件mousedown来事件监听。
示例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<script src="jquery.min.js"></script>
  6. 		<script type="text/javascript">
  7. 		$(document).ready(function(){
  8. 			$(document).mousedown(function(e) {
  9. 		         // 1 = 鼠标左键 left; 2 = 鼠标中键; 3 = 鼠标右键
  10. 		         console.log(e.which);
  11. 	     	})
  12. 		});
  13. 		</script>
  14. 	</head>
  15. 	
  16. 	<body>
  17. 	</body>
  18. </html>

经验分享

鼠标点击事件在做网页特效开发时是最常用的事件之一，也是实现用户交互的基本事件，所以掌握好常用的鼠标点击事件，对以后做网页中的特效有很大的帮助。
微信交流：zzxingyun

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/p445098355/article/details/104010354

内容来源于网络，如有侵权，请联系作者删除！

jquery前端JQuery实用教程

相关文章

    查看更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com