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

【问题标题】：How do I stop the background being clicked behind a button?如何停止在按钮后面单击背景？
【发布时间】：2016-05-23 08:33:06
【问题描述】：

我有一个可点击的 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/

【问题讨论】：

标签： html

【解决方案1】：

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

event.stopPropagation();

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

【讨论】：

【解决方案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/

【讨论】：

【解决方案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() 添加到按钮点击。

【讨论】：

【解决方案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>

【讨论】：