Home > Article > Web Front-end > How to remove mouse events in jquery
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()".
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>
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>
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>
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!