js中简单阻止事件冒泡的方法-js教程-网页制作-壹聚教程网js中简单阻止事件冒泡的方法
文章找了两个关于js中简单阻止事件冒泡的方法，这两个实现方法与函数都非常的简单有效，希望文章对各位有帮助。
JavaScript 阻止事件冒泡，无使用其它插件来辅助，原生JS代码，考虑到浏览器的兼容性问题，这里对IE/火狐、Operating以及Chrome都有针对性的判断，代码如下：
function cancelBubble(evt) {
&// 阻止事件冒泡
&if (window.event) {
&&// Chrome,IE6,Opera
&&window.event.cancelBubble =
&&// FireFox 3
&&evt.stopPropagation();
停止事件传播
事件对象还提供了一个.stopPropagation()方法，该方法可以完全阻止事件冒泡。与.target类似，这个方法也是一种纯JavaScript特性，但在跨浏览器的环境中则无法安全地使用 。不过，只要我们通过jQuery来注册所有的事件处理程序，就可以放心地使用这个方法。
下面，我们会删除刚才添加的检查语句event.target == this，并在按钮的单击处理程序中添加一些代码：
复制代码 代码如下:
$(document).ready(function(){
&$('#switcher .button').click(funtion(event){
&& event.stopPropagation();
& 同以前一样，需要为用作单击处理程序的函数添加一个参数，以便访问事件对象。然后，通过简单地调用event.stopPropagation()就可以避免其他所有DOM元素响应这个事件。这样一来，单击按钮的事件会被按钮处理，而且只会被按钮处理。单击样式转换器的其他地方则可以折叠和扩展整个区域。
简单的实现了一下，整了半天，代码如下：
&&& &style type=&text/css&&
&&&&&&&& #hide{
&&&&&&&& &width:75%;height:80background:display:
&&&&&&&& }
&&&&&&&& .hander{cursor:}
&&&&&&&& input{
&&&&&&&& &margin:5 0 0 900;
&&&&&&&& }
&&& &/style&
&&&&&& &script&
&&&&&&& //不用window.onload也可以
&&&&&&&& document.documentElement.onclick = function() {
&&& & &document.getElementById('hide').style.display = 'none';&
&&&& //阻止冒泡事件方法
&&&& function stopPropagation(e) {&
&&&&& e = e || window.&
&&&&& if(e.stopPropagation) { //W3C阻止冒泡方法&
&&&&&&&&& e.stopPropagation();&
&&&&& } else {&
&&&&&&&&& e.cancelBubble = //IE阻止冒泡方法&
&&//方法必须要放在window.onload下
&&window.onload = function(){
&&&document.getElementById(&hide&).onclick = function(e) {
&& &&& &stopPropagation(e);
&&&&& document.getElementById('btn_show').onclick = function(e) {&
&&&&&&&& &document.getElementById('hide').style.display = 'block';&
&&&&&&&& &stopPropagation(e);&
&&&&& &/script&
&&&div id=&hide& class=&hander&&click here nothing happen,you can click beside this area&/div&
&&&input type=&button& id=&btn_show& value=&show& class=&hander&/&
上一页： &&&&&下一页：相关内容5.若用冒泡排序方法对序列{10,14,26,29,41,51}从大到小排序,需进行（）次比较?A.3B.10C.15D.25
草莓粉粉嗣肿1
选C要比较15次.
为您推荐：
其他类似问题
扫描下载二维码网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
jquery的冒泡事件的阻止与允许(三种实现方法)
有时我们不希望冒泡或默认的事件发生，这样就需要一些jQuery的的方法阻止冒泡和默认的事件了。可以通过以下三种方法做到不同程度的阻止。 A：return false ---&In event handler ,prevents default behavior and event bubbing 。 return false 在事件的处理中，可以阻止默认事件和冒泡事件。 B：event.preventDefault()---& In event handler ,prevent default event (allows bubbling) 。 event.preventDefault()在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。 C：event.stopPropagation()---& In event handler ,prevent bubbling (allows default behavior). event.stopPropagation()在事件的处理中，可以阻止冒泡但是允许默认事件的发生。
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：
[][][][][][][][][][]js冒泡、捕获事件及阻止冒泡方法详细总结
javascript, jquery的事件中都存在事件冒泡和事件捕获的问题，下面将两种问题及其解决方案做详细总结。 事件冒泡是一个从子节点向祖先节点冒泡的过程； 事件捕获刚好相反，是从祖先节点到子节点的过程。 给一个jquery点击事件的例子： 代码如下：
代码如下: &!DOCTYPE html& &meta charset="utf-8"& &title&test&/title& &head& &script src="/jquery-latest.js"&&/script& &script type="text/javascript"& $(function(){ $('#clickMe').click(function(){ alert('hello'); }); $('body').click(function(){ alert('baby'); }); }); &/script& &/head& &body& &div style="width:100height:100background-color:"& &button type="button" id="button2"&click me&/button& &button id="clickMe"&click&/button& &/div& &/body& &/html&
事件冒泡现象：点击 “id=clickMe” 的button,会先后出现“hello” 和 “baby” 两个弹出框。 分析：当点击 “id=clickMe” 的button时，触发了绑定在button 和 button 父元素及body的点击事件，所以先后弹出两个框，出现所谓的冒泡现象。 事件捕获现象：点击没有绑定点击事件的div和 “id=button2” 的button, 都会弹出 “baby” 的对话框。 在实际的项目中，我们要阻止事件冒泡和事件捕获现象。 阻止事件冒泡方法： 法1：当前点击事件中
代码如下: $('#clickMe').click(function(){ alert('hello');
代码如下: $('#clickMe').click(function(event){ alert('hello'); var e = window.event || if ( e.stopPropagation ){ //如果提供了事件对象，则这是一个非IE浏览器 e.stopPropagation(); }else{ //兼容IE的方式来取消事件冒泡 window.event.cancelBubble = } });
貌似捕获事件不能被阻止
顶一下(0) 踩一下(0)
热门标签：