如何使僅父div可點擊？

Question

就像我的標題所解釋的，如何才能僅使parent-div可點擊？

的HTML

<div id="canvas" onclick="closeCanvas()">
    <img src="image.png" />
</div>

JQUERY

function closeCanvas(){
    $("#canvas").fadeOut(300);
}

我的問題是，當我單擊“圖像”時，函數closeCanvas（）也被觸發。 如何僅使父級#canvas可觸發？

Answer 1

將StopPropagation添加到img ，這意味着單擊img不會將click事件傳遞給父div：

<div id="canvas" onclick="closeCanvas()">
   <img src="image.png" onClick="event.stopPropagation()" />
</div>

Answer 2

 $(document).ready(function(){ $('canvas').click(function(e){ console.log(e); }); }); function closeCanvas(event){ if(event.target.id== "canvas") $("#canvas").fadeOut(300); } 

 #canvas{ height:100px; width:100px; background-color:red; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="canvas" onclick="closeCanvas(event)"> <img src="image.png" /> </div>