javascript - jquery防止父点击子函数

Question

如果我单击图像 div，我会遇到此问题，payoutArticle() 函数也会被调用。我在 stackoverflow 上检查了几个线程，但没有一个起作用

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

引用这个例子:

 $('.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>