js函数中 如何阻止事件冒泡

js函数中 如何阻止事件冒泡,第1张

首先:你不想使用的方法恰恰是推荐的最好的方法,为什么不用推荐的方法呢。

如果实在想用第一种,onclick="F_Bind_ZhongLeiClick(this)"
修改为

onclick="F_Bind_ZhongLeiClick(this);return false;"

不要在div上绑定点击事件,在a连接上绑定点击事件,阻止事件冒泡就行了啊。
$("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)


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/yw/12978193.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-29
下一篇 2023-05-29

发表评论

登录后才能评论

评论列表(0条)

保存