Question

我有一个可点击的DIV，我试图在这个DIV中放一个按钮。单击该按钮时，会发生与单击DIV本身时不同的事件。

目前，当我点击按钮时，会触发DIV以及按钮。有什么办法可以在单击按钮时停止触发DIV吗？

<div class="stack">
<div class="background" onclick="alert('background clicked');">
    <button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute;">This is a background button</button>
    <div class="card">
        <button onclick="alert('card-button clicked');">This is a card button</button>
    </div>
</div>

样本： https://jsfiddle.net/b3cf91zo/

Answer 1

在这种情况下，您可以使用以下方式停止传播：

event.stopPropagation();

你应该看一下这篇文章：How to stop onclick event in div from propagating to the document?

Answer 2

使用stopPropagation。

<div class="stack">
        <div class="background" onclick="alert('background clicked');">
            <button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute;">This is a background button</button>
            <div class="card">
                <button id="clickButton">This is a card button</button>
            </div>
        </div>
    </div>

$("#clickButton").click(function(e) {
   e.stopPropagation();
   alert('card-button clicked')
});

https://jsfiddle.net/mc19ynhw/

Answer 3

<div class="stack">
    <div class="background" onclick="alert('background clicked');">
        <button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute;">This is a background button</button>
        <div class="card">
            <button onclick="alert('card-button clicked');event.stopPropagation();">This is a card button</button>
        </div>
    </div>
</div>

添加event.stopPropagation()按钮点击。

Answer 4

我在这里修改了你的代码。请在下面找到。希望得到这个帮助。

**

<script>
function ButtonClick(thisElement){
if(thisElement=="BUTTON"){
alert("Button Clicked");
}
}
function DivClicked(thisElement){
if(thisElement=="DIV"){
alert("div Clicked");
}
}
</script>
<div class="stack">
    <div class="background" id="back" onclick="DivClicked(event.target.nodeName)">
        <button onclick="alert('bg-button clicked');" style="left:65px; top:65px; position: absolute;">This is a background button</button>
        <div class="card">
            <button id="btn1" onclick=" ButtonClick(event.target.nodeName)">This is a card button</button>
        </div>
    </div>
</div>

**

如何停止在按钮后面单击背景？

4 个答案: