Comment faire pour que le div div soit cliquable?

Question

Comme mon titre l'explique, comment est-ce que je peux seulement cliquer sur le div parent?

HTML

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

JQUERY

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

Mon problème est que lorsque je clique sur le "image", la fonction closeCanvas() est également trigged. Comment puis-je créer uniquement le parent, #canvas, déclenchable?

Answer 1

Ajouter stopPropagation à img que moyenne cliquant sur le img ne passera pas l'événement de clic au div parent:

<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>