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

使用event.stopPropagation（）来破坏事件的冒泡。

参考此示例：

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

点击事件处理程序已注册两次：

by onclick属性
使用$(...).click(...)

在两个处理函数中，事件开始在click separateley上冒泡。您可以删除onclick属性以阻止调用函数payoutArticle：

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

jquery阻止父单击子函数

2 个答案: