按下按钮时防止在列表中单击行答案

【问题标题】：Prevent row click in list when button is pressed按下按钮时防止在列表中单击行
【发布时间】：2019-03-07 17:31:26
【问题描述】：

我在 v-list-tile 上使用带有点击事件的 v-list。我还想在 v-list-tile-action 中有一个带有点击事件的按钮。我的问题是当我按下 v-list-tile-action 中的按钮时，这两个事件都会触发。

我想要两个事件，一个用于行，一个用于按钮，但是当按下按钮时如何防止 v-list-tile / row click 触发？

【问题讨论】：

How to prevent/stop click propagation in vuejs的可能重复

标签： vuetify.js

【解决方案1】：

感谢您的回答，但我想通了，只需使用 @click.stop=""

【讨论】：

请删除这个，
不应该是：@click.prevent=""

【解决方案2】：

如何防止事件传播的示例脚本

$(document).ready(function(){
    $("span").click(function(event){
        event.stopPropagation();
        alert("The span element was clicked.");
    });
    $("p").click(function(event){
        alert("The p element was clicked.");
    });
    $("div").click(function(){
        alert("The div element was clicked.");
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height:100px;width:500px;padding:10px;border:1px solid blue;background-color:lightblue;">
This is a div element.
<p style="background-color:pink">This is a p element, in the div element. <br><span style="background-color:orange">This is a span element in the p and the div element.</span></p></div>

<p><b>Note:</b> Click on each of the elements above. When clicking on the <b>div</b> element, it will alert that the div element was clicked. When clicking on the <b>p</b> element, it will return both the p and the div element, since the p element is inside the div element. 
But when clicking on the <b>span</b> element, it will only return itself, and not the p and the div element (even though its inside these elements).  The event.stopPropagation() stops the click event from bubbling to the parent elements. 
</p>

<p><b>Tip:</b> Try to remove the event.stopPropagation() line, and click on the span element again (the click event will now bubble up to parent elements).</p>

你可以看到event有一个方法叫stopPropagation，我用的是JQuery，Javascript native也是一样的。

【讨论】：