如何使仅父div可点击？

Question

As my title explains, how can I make only the parent-div clickable?

HTML

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

JQUERY

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

My issue is that when I click the "image", the function closeCanvas() is also trigged. How can I make only the parent, #canvas, triggerable?

Answer 1

Add StopPropagation to img that mean clicking the img will not pass the click event to the parent 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>