Question

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

我想同时拥有一个事件，一个事件用于行，另一个事件用于按钮，但是如何防止按下按钮时触发v-list-tile /行单击？

Answer 1

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

$(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本机是相同的。

Answer 2

感谢您的回答，但我知道了，只需使用@ click.stop =“”

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

2 个答案: