jquery prevent parent click child function

Question

i got this problem if i click on my image div the payoutArticle() function gets also called. I checked several threads on stackoverflow, but none worked

<div class="articlepayout" onclick="payoutArticle();">
    <div class="img" > 
          <a href="myurl" rel="shadowbox[photos]">
              <img src="imageurl"/>
          </a>
    </div>
</div>


<script type="text/javascript">
    $(".articlepayout").click(function(e){ 
        var senderElement = e.target;
        if(senderElement == this) { 
            //what to do here?
        } else { 
            e.preventDefault();
        }
    });
</script>

Answer 1

Use event.stopPropagation() to break bubbling of event.

Refer this example:

  $('.img').on('click', function(e) { e.stopPropagation(); alert('Img clicked!'); }); $('.articlepayout').on('click', function() { alert('articlepayout clicked!'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="articlepayout"> <div class="img"> <a href="javascript:void(0)" rel="shadowbox[photos]"> <img src="Chrysanthemum.jpg" /> </a> </div> <br/>Outside Img <br/>Outside Img <br/>Outside Img <br/>Outside Img <br/>Outside Img </div> 

Answer 2

The click event handler is registered twice:

• by the onclick attribute
• with the $(...).click(...)

In both handler functions the events starts bubbling up on click separateley. You could remove the onclick attribute to prevent the function payoutArticle to be called:

$(".articlepayout").attr("onclick", "");