阻止事件冒泡与默认行为

工作中使用到的前端框架该行为的总结：
1. vue

a.阻止事件冒泡

<div id="box">
    <div @click="show2()">
        <input type="button" value="按钮" @click.stop="show()">
    </div>
</div>

触发input的show事件，不会冒泡触发父节点的show2事件。

b.默认行为

<div id="box">
    <input type="button" value="按钮" @contextmenu="show()">
</div>

在上面的代码中，input元素绑定了一个contextmenu事件，单击鼠标右键会触发该事件，并调用show()方法，还会出现浏览器默认的菜单选项若要阻止默认行为，只需将@contextmenu 改成@contextmenu.prevent 即可

用 @click.prevent.self 会阻止所有的点击，而 @click.self.prevent 只会阻止元素上的点击。

2. angular

ngClick 阻止冒泡和默认行为
$event.stopPropagation();

html中使用

<i class="fa fa-times icon-muted  fa-fw ss-select-item-close" ng-click="del();$event.stopPropagation();"  title=""></i>

js中使用

//html code:
<i class="fa fa-times icon-muted  fa-fw ss-select-item-close" ng-click="del($event)"  title=""></i>

//js code:
scope.del = function($event){
    $event.stopPropagation();
}

3. JavaScript

扫描二维码关注公众号，回复： 4377238 查看本文章

js 阻止事件冒泡和默认行为 preventDefault、stopPropagation、return false