將點擊方法應用到外部div，但不是內部div

Question

在此示例中，我希望在單擊黑色外部div時觸發警報，但在單擊內部div內的任何內容時不會觸發警報。

當前，當我單擊內部按鈕時，它會觸發警報。

$("#outer").click(function() { 
 
    alert("triggered"); 
 
});

#outer{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #000; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
#inner{ 
 
    background-color: #fff; 
 
width: 300px; 
 
height: 300px; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="outer"> 
 

 
    <div id="inner"> 
 
    <button>inner button</button> 
 
    </div> 
 
</div>

我想內的div裏面什麼也沒有觸發警報。我該怎麼做呢？

（由於某種原因，內部按鈕在片段顯示，這裏codepen鏈接：https://codepen.io/GuerrillaCoder/pen/Pmvmqx）

Answer 1

您只需檢查元素的id，因爲inner是子元素，它將始終將該事件傳播到父元素（外層）。

$("#outer").click(function(event) { 
if(event.target.id=="outer"){ 
    alert("triggered"); 
} 
}); 

Answer 2

在點擊功能檢查事件的目標等於外

$("#outer").click(function(e) { 
     if (e.target.id === "outer"){ 
      alert("triggered"); 
     } 
    }); 

Answer 3

您可以使用event.stopPropagation();時點擊inner格：

$("#outer").click(function() { 
 
    alert("triggered"); 
 
}); 
 
$('#inner').click(function (evt) { 
 
    evt.stopPropagation(); 
 
});

#outer{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #000; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
#inner{ 
 
    background-color: #fff; 
 
    width: 300px; 
 
    height: 300px; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="outer"> 
 
    <div id="inner"> 
 
     <button>inner button</button> 
 
    </div> 
 
</div>

Answer 4

純JavaScript的解決方案，如果有人關心 - ））

var inner = document.getElementById("inner"); 
 
var btn = inner.querySelector("button"); 
 
document.getElementById("outer").addEventListener("click", function(e) { 
 
    (e.target == btn) || (e.target == inner) ? console.log("click triggered from"+ e.target+". so we do not alert anything") : alert("something"); 
 
});

#outer{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #000; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
#inner{ 
 
    background-color: #fff; 
 
width: 300px; 
 
height: 300px; 
 
    text-align: center; 
 
}

<div id="outer"> 
 

 
    <div id="inner"> 
 
    <button>inner button</button> 
 
    </div> 
 
</div>

Answer 5

另一種方式來做到這一點：

$("#outer").click(function() { 
 
    alert("triggered"); 
 
}); 
 
$("#inner").click(function(e) { 
 
e.stopPropagation() 
 
});

#outer{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #000; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
#inner{ 
 
    background-color: #fff; 
 
width: 300px; 
 
height: 300px; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="outer"> 
 
    <div id="inner"> 
 
    <button>inner button</button> 
 
    </div> 
 
</div>

Answer 6

我覺得event.stopPropagation()方法將是最有用的solution.you只需要調用它的外層div的兒童：

$("#outer").on('click', function() { 
    alert("triggered"); 
}).children().on('click', function (e) { 
    e.stopPropagation(); 
}); 

還要檢查這個Solution。

Answer 7

您可以使用event.target來檢查事件是否是由父母或由其子女觸發：

$("#outer").click(function(e) { 
    if(e.target !== this) { 
     return; 
    } else { 
     alert("triggered"); 

    } 
}); 

Answer 8

試試這個

$("#outer").click(function(e) { 
    e.target.id=='outer'?alert('triggered'):void(0); 
});