How to remove mouse events in jquery-Front-end Q&A-php.cn

How to remove mouse events in jquery

青灯夜游

Release： 2022-03-25 19:29:53

Original

1807 people have browsed it

Methods to remove events: 1. Use unbind(), the syntax is "the element that is bound to the mouse event.unbind()"; 2. Use unelegate(), the syntax is "the element that is bound to the mouse event. undelegate();"; 3. Use off(), the syntax is "the element bound to the mouse event.off()".

How to remove mouse events in jquery

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

Jquery method to remove mouse events:

Method 1: Use unbind() method

## The #unbind() method removes the event handler of the selected element.

This method can remove all or selected event handlers, or terminate the execution of the specified function when an event occurs.

ubind() works with any event handler attached via jQuery.

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("p").click(function() {
					$(this).slideToggle();
				});
				$("button").click(function() {
					$("p").unbind();
				});
			});
		</script>
	</head>
	<body>
		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>
		<p>点击任何段落可以令其消失。包括本段落。</p>
		<button>删除 p 元素的事件处理器</button>
	</body>
</html>

Copy after login

How to remove mouse events in jquery

Method 2: Use undelegate() method

undelegate() Method removes one or more event handlers added by the delegate() method.

Example:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				$("body").delegate("p", "click", function() {
					$(this).slideToggle();
				});
				$("button").click(function() {
					$("body").undelegate();
				});
			});
		</script>
	</head>
	<body>
		<p>这是一个段落。</p>
		<p>这是另一个段落。</p>
		<p>点击任何段落可以令其消失。包括本段落。</p>
		<button>删除点击事件</button>
	</body>
</html>

Copy after login

How to remove mouse events in jquery

Method 3: Use off() method

off() method is usually used For removing event handlers added via the on() method.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("p").on("click", function() {
					$(this).css("background-color", "pink");
				});
				$("button").click(function() {
					$("p").off();
				});
			});
		</script>
	</head>
	<body>

		<p>点击这个段落修改它的背景颜色。</p>
		<p>点击一下按钮再点击这个段落( click 事件被移除 )。</p>

		<button>移除 click 事件</button>

	</body>
</html>

Copy after login

How to remove mouse events in jquery

Note: As of jQuery version 1.7, the off() method is the new replacement for the unbind(), die(), and undelegate() methods. This method brings a lot of convenience to the API and is recommended because it simplifies the jQuery code base.

[Recommended learning:

jQuery video tutorial, web front-end video]

The above is the detailed content of How to remove mouse events in jquery. For more information, please follow other related articles on the PHP Chinese website!