前端开发：Vue组件事件属性穿透的使用_vue 点击事件穿透

前言

在前端开发过程中，事件点击操作也是非常常用的，尤其是关于事件之间的属性穿透使用更是如此。在真实的业务场景中，会遇到点击事件冲突的情况，这就更涉及到事件的穿透相关的内容。在Vue中，关于组件事件属性穿透的知识点也是非常重要的，那么本篇博文就来分享总结一下事件穿透的知识点，方便查阅使用。

事件穿透场景

在实际开发过程中，会遇到一些场景：在页面里面弹出弹框，弹框上面有点击操作按钮，在弹框下面的页面中也有点击操作按钮，相同位置下，这样在点击弹框操作按钮的时候，也会重复触发弹框下面的点击操作按钮。在这种场景下就需要通过使用事件穿透来解决这个问题。

事件穿透使用

1、实际开发场景中预防点击事件冲突，使用事件穿透来解决，阻止单击事件继续传播，避免相同位置的点击事件冲突，具体使用如下所示：

（1）在Vue中关于使用事件穿透的方法就是直接用click.stop，如下所示：

<button v-on:click.stop="isDo"> </button>

（2）在JS中关于使用事件穿透的方法就是直接在事件的方法中添加event.stopPropagation()，如下所示：

//HTML
 
<button>结束</button>
 
//JS
 
$("button").on("click",function(){
 
event.stopPropagation()
 
})