Question

我有一系列点击事件导致了一些传播问题。这个容器的数据是通过ajax加载的，因此是on click方法。这是我的代码：

＆＃13;

$(function () {
    $("body").on("click","#top-div",function(){
        console.log("top event");
    });

    $("body").on("click","#middle-div",function(e){
        e.stopPropagation();
    });

    $("body").on("click","#bottom-div",function(){
        console.log("bottom event");
    });
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-div">
  top
    <div id="middle-div">
      middle
        <div id="bottom-div">
          bottom
        </div>
    </div>
</div>

＆＃13;

顶部div有一个事件，中间人不需要继承stopPropagation()。然而，底部需要有一个自己的事件，但中间的stopPropagation()阻止它执行事件（如果我删除底部事件触发的停止传播，但巧合的是顶部）

如何解决这个冒泡问题？

Answer 1

我认为你想要发生的事情是传播只有在它来自中间div时才会停止;如果它来自底部div，您希望事件一直冒泡到顶部。

您需要有条件地致电stopPropagation。如果事件不是来自#bottom-div内部或内部，您想要调用它。您可以使用closest：

进行测试

if (!$(e.target).closest('#bottom-div').length) {
    e.stopPropagation();
}

最好使用closest，而不是直接测试元素的id，因为closest即使有其他元素，a也会按预期继续工作（{各种em内的{1}}或div。

$(function () {
    $("body").on("click","#top-div",function(){
        console.log("top event");
    });

    $("body").on("click","#middle-div",function(e){
        if (!$(e.target).closest('#bottom-div').length) {
            e.stopPropagation();
        }
    });

    $("body").on("click","#bottom-div",function(){
        console.log("bottom event");
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-div">
  top
    <div id="middle-div">
      middle
        <div id="bottom-div">
          bottom
        </div>
    </div>
</div>

Answer 2

而不是将事件附加到每个div。你可以考虑这样做检查此代码段

$(document).ready(function() {
  $("body").on("click", "div", function(event) {
    console.log(event.currentTarget.id + "event");
    if (event.target.id === "middle-div") {
      event.stopPropagation()
    }
  });


});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top-div">
  hello
  <div id="middle-div">
    hi
    <div id="bottom-div">
      bott-mid-v
    </div>
  </div>
</div>

希望有所帮助

Answer 3

Bubbling从大多数嵌套元素到树根，我想你在某种程度上误解了它。例如，点击 bottom-div 将：

在 bottom-div 上调用事件 - ＆gt; middle-div 上的通话活动 - ＆gt;在 top-div 上调用事件。

据我所知，您需要了解一些如何检查div被点击的内容，因此要对其进行控制只需创建单个事件并检查点击目标：

$("body").on("click","#top-div",function(e){

   if ( e.target.id ==='top-div'){
     //click in top div
   }

   if ( e.target.id ==='middle-div'){
     //click in middle div
   }

   if ( e.target.id ==='bottom-div'){
     //click in bottom div
   }



});

在这个命题中你确切地知道哪个div被点击了，但它总是最嵌套的div，所以只有当点击 middle-的一部分时，目标才会是 middle-div div 不是 bottom-div ，它将是例如填充空间，与 top-div 相同，只有点击才会成为目标在没有儿童元素的太空中。

有关事件冒泡的更多信息您可以在http://maciejsikora.com/standard-events-vs-event-delegation/找到。

事件传播问题

3 个答案: