jQuery鼠标点击事件

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

概念

个人理解:

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() 方法一起使用。
语法:

触发被选元素的 mousedownmouseup 事件:

$(selector).mousedown()
$(selector).mouseup()

添加函数到 mousedownmouseup 事件:

$(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

相关文章