Vue.js中点击删除按钮如何阻止父元素changeFilter事件触发？

这是事件冒泡导致的问题：点击子元素（删除按钮）时，事件会向上传播到父级li元素，触发li上绑定的changeFilter事件。给你两种解决方法：

方法一：使用Vue的.stop事件修饰符（推荐） #

直接在删除按钮的点击事件上添加.stop修饰符，它会自动调用event.stopPropagation()阻止事件冒泡，写法最简洁：

修改后的HTML代码：

<ul>
    <li v-on:click="createNew">Create new Filter</li>
    <li v-for="item in filters.entities" v-on:click="filter.changeFilter(item.id,item.name)">
        {{ item.name }}
        <div title="Delete filter" v-on:click.stop="delete(item.id)">x</div>
    </li>
</ul>

方法二：手动在删除方法中阻止冒泡 #

如果需要在删除逻辑里额外处理事件，可以显式传递事件对象，然后调用阻止冒泡的方法：

步骤1：修改HTML，传递事件对象$event #

<ul>
    <li v-on:click="createNew">Create new Filter</li>
    <li v-for="item in filters.entities" v-on:click="filter.changeFilter(item.id,item.name)">
        {{ item.name }}
        <div title="Delete filter" v-on:click="delete($event, item.id)">x</div>
    </li>
</ul>

步骤2：修改JS方法，添加阻止冒泡逻辑 #

delete: (event, itemId) => {
    event.stopPropagation(); // 阻止事件向上冒泡到父级li
    var result = window.parent.Xrm.WebApi.deleteRecord('ice_filters', itemId.toString());
}

两种方法都能解决问题，优先用方法一，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者MVC_Nhibernate