Js点击内部元素防止外部点击事件


开发过程中,我们不免会遇到各种奇奇怪怪的问题,需要去解决,比如,今天这个问题:如图所示,我们是一个item,外边的黑红框上有一个点击事件,点击会跳转到指定的商品或其他页面,黄色部分是一个删除按钮,那么我们点击这个删除时,同时外部的那个跳转也会被触发掉!

image.png

js其实提供给了我们一个方法:

event.stopPropagation()

说明

该方法将停止事件的传播,阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意,虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用,但是它可以阻止把事件分派到其他节点。


用法:

如下图所示,我们的结构如下,外层click包含了内层的click

image.png

可以看到我们在内层里的参数中传递了一个event

image.png

那么我们在js中接收这个event,同时调用一下js提供的这个方法。

就可以停止click的冒泡传递;


欢迎没有解决问题的同学留言讨论;



上一篇

评论



最新评论

PHP笔记: ypengchao@126.com 查看原文 06月26日 11:38
PHP笔记: 用数据库 查看原文 06月26日 11:37
网站/shl设计: 如果关闭浏览器了,session就没有了呀。再打开浏览器不就可以重新登陆了。 查看原文 05月28日 15:26
网站/shl设计: 站长怎么联系你有给问题请教。 查看原文 05月28日 15:25
网站/shl设计: 说的不错! 查看原文 05月28日 15:22

分享

扫一扫,快速分享到微信

赞助商