首先:你不想使用的方法恰恰是推荐的最好的方法,为什么不用推荐的方法呢。
如果实在想用第一种,onclick="F_Bind_ZhongLeiClick(this)"
修改为
$("a")bind("click",function(event){
eventstopPropagation();
})
JavaScript中防止触发子元素事件时父元素也被触发,可以使用stopPropagation方法来停止子元素向上冒泡。
举例如下:
HTML代码:
<div><p>这是子元素</p>
</div>
JavaScript代码:
同时为子元素(p)以及父元素(div)设置了点击事件。并在子元素(p)的点击事件回调用使用了stopPropagation方法来阻止事件向上冒泡。
$('div')click(function() {consolelog('我是被父元素触发的');
});
$('p')click(function(e){
estopPropagation();
consolelog('我是被子元素触发的');
});
正确运行结果:
运行结果仅仅只显示子元素应该触发的内容,而并没有显示父元素的触发内容。
假设我将子元素回调中的stopPropagation删除,结果将会变成:
从上面的案例可以看出,如果删除了stopPropagation方法,父元素将会被触发。
事件冒泡:开始时由最具体的元素接收,然后逐级向上传播到到 DOM 最顶层节点。
1标准写法:利用事件对象里面的 stopPropagation()方法
estopPropagation()
2非标准写法:IE 6-8 利用事件对象 cancelBubble 属性
ecancelBubble = true;
事件委托也称为事件代理, 在 jQuery 里面称为事件委派。 不是每个子节点单独设置事件监听器,而是事件监听器设置在其父节点上,然后利用冒泡原理影响设置每个子节点。
如:给 ul 注册点击事件,然后利用事件对象的 target 来找到当前点击的 li,因为点击 li,事件会冒泡到 ul 上,ul 有注册事件,就会触发事件监听器,这里只 *** 作了一次 DOM ,提高了程序的性能。
阻止事件冒泡可以防止触发父元素上面绑定的事件。
比如:
<div class="parent"><div class="child">123</div>
1234
</div>在parnet上面和child上面都绑定click事件,并且打印1234,当你点击child的div时,会发现打印两次。
当元素多层嵌套的时候,每层都有点击事件,它就会发生冒泡,一层一层的触发,但有时候我们只想触发某一层,不想让其他层的事件触发,这就需要阻止冒泡事件了。
以angular项目为例,我们都知道angularJS中的执行方法都会自带一个$event,这个$event就是当前事件的对象,通过它来阻止冒泡。
查看angular的官方api文档,可以看出,angular对ng事件(例如:ng-click、ng-blur、ng-dblclick等等),添加了一个$event变量。
其实无论是js还是jq抑或是angular,阻止冒泡的关键都在于抓取event/$event
需要准备的材料分别有:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建html文件,例如:indexhtml,并引入jquery,编写问题基础代码。
2、indexhtml中,将<script>标签中的orange的点击事件中,修改jquery代码为:
$("#green")click();estopPropagation();
3、浏览器运行indexhtml页面,此时点击橘色方块发现成功禁止了其它子元素的点击事件,只d出了“green click”。
$('aaa')on('click', function(event) {eventpreventDefault();
alert('aaa');
});
$('bbb')on('click', function(event) {
eventstopPropagation();
alert('bbb');
});
$('bbb')off('click')on('click',function(){
alert('bbb2');
})
只能做到这样,在第一次绑定之后,解绑,并且重新绑定对应的方法(方法中去掉stopPropagation)
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)