首页 / JQUERY / jQuery阻止同类型事件小结

jQuery阻止同类型事件小结

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jQuery阻止同类型事件小结，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2176字，纯文字阅读大概需要4分钟。

内容图文

代码如下:

<!DOCTYPE HTML> 
<html> 
<head> 
<title>test</title> 
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
</head> 
<body> 
<div style="height:300px;background-color:red;" id="red"> 
<div style="height:200px;background-color:green;" id="green"> 
</div> 
</div> 
</body> 
</html> 
 
在上面的HTML中，red元素是green元素的父元素。 
 代码如下:

$(function(){ 
$("#green").click(function(event){ 
alert("green click1"); 
}); 
$("#green").click(function(event){ 
alert("green click2"); 
}); 
$("#red").click(function(event){ 
alert("red click"); 
}); 
}); 
 
上面的js代码给red元素和green元素添加了三个click事件。 
当点击子元素green元素时，会依次执行green click1、green click2、red click事件。 
事件追加：点击green元素会依次执行green click1、green click2两个事件（同一元素的同类型事件）。 
事件冒泡：点击green元素会触发父元素的red click事件（父级元素的同类型事件）。 
1、 在子元素事件函数中阻止事件冒泡 
方法1：event.stopPropagation() 
 代码如下:

$(function(){ 
$("#green").click(function(event){ 
event.stopPropagation(); 
alert("green click"); 
}); 
$("#red").click(function(event){ 
alert("red click"); 
}); 
}); 
 
方法2：return false 
 代码如下:

$(function(){ 
$("#green").click(function(event){ 
alert("green click"); 
return false; 
}); 
$("#red").click(function(event){ 
alert("red click"); 
}); 
}); 
 
通过上面的两种方法，点击子元素green区域后，red click事件被阻止不再执行。但不会影响red元素其他区域的点击。 
二者区别： 
return false相当于event.preventDefault()+event.stopPropagation()。 
2、 在父元素事件函数中阻止事件冒泡 
 代码如下:

$(function(){ 
$("#green").click(function(event){ 
alert("green click"); 
}); 
$("#red").click(function(event){ 
if(event.target == this) 
{ 
alert("red click"); 
} 
}); 
}); 
 
通过if(event.target== this)判断点击的目标元素是不是red元素本身，如果不是red本身而是它的子元素green元素，则不会执行if内的代码。 
3、 阻止事件追加 
以上的方法只能阻止事件冒泡（也就是父级元素的同类型事件），但不能阻止事件追加（同一元素的同类型事件）。 
 代码如下:

$(function(){ 
$("#green").click(function(event){ 
event.stopImmediatePropagation(); 
alert("green click"); 
}); 
$("#green").click(function(){ 
alert("green click2"); 
}); 
}); 
 
event.stopImmediatePropagation()不但可以阻止green click2事件，同时也阻止事件冒泡。

内容总结

以上是互联网集市为您收集整理的jQuery阻止同类型事件小结全部内容，希望文章能够帮你解决jQuery阻止同类型事件小结所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/366735.html

来源：【匿名】