Question

我想在html中停止从父div传播到子div的事件。这是一个简单的代码，我正在尝试做什么：

<div>
  <div id='categoryList'>
    <div class='listed-category'>
      <span>some content</span>
      <a id='close'>x</a> //"a" is used to remove the div
    </div>
  </div>
</div>
<div id='dropdown'>
</div>

在上面的代码中，如果我点击<div id='categoryList'> <div id='dropdown'>将按照以下代码向上和向下滑动。

$(document).ready(function () {

    $('#categoryList').click(function (event) {
        event.preventDefault();
        event.stopPropagation();
        if ($('#dropdown').is(":visible")) {
            $('#dropdown').slideUp(400);
        }
        else {
            $('#dropdown').slideDown(400);
        }
    });
})

但是当我点击孩子<div class='listed-category'>时，上面的JavaScript会执行，而<div id='dropdown'>会上下滑动。怎么阻止这个？但我希望能够点击<a id='close'>删除孩子div

Answer 1

检查匹配点击对象的目标。在click事件处理程序的开头尝试此代码。

if( event.target !== this ) {
       return;
}
//...do stuff..

Answer 2

你需要停止在孩子身上传播，而不是父母，所以你应该写下这个：

 $('.listed-category').click(function(event){
    event.stopPropagation();
});

如果您想点击a代码并停止传播，您还需要写一下：

 $('a#close').click(function(event){
    event.stopPropagation();
});

无论如何，我会建议Yuriy的回答。我只是想让你知道你应该把event.stopPropagation()放在孩子身上（如果你不想让父母的事件被运行），而不是父母。

Answer 3

建议不要像下面那样在div <div class='listed-category'>中使用unbind（）方法，而不是使用e.stopPropagation ...

$('.listed-category').unbind('click');

这将允许停止.listed-category div的传播效果。方法e.stopPropagation()不起作用，因为它仅适用于父元素而不适用于子元素。

您始终可以创建一个新函数，然后再分配给.listed-category div。您还可以在以下链接中查看unbind()方法的文档：http://api.jquery.com/unbind/

希望对您有帮助！

Answer 4

http://codepen.io/rakeshcode/pen/KrZdNo

＆＃13;

$(document).ready(function(){
  $(".arrow").click(function(){
  $(".row").slideToggle();
  
  });

$(".btn").click(function(event){
   event.stopPropagation();
  //$(".btn").attr("href","www.yahoo.com")
});
})

＆＃13;

.btn {
  display: block;
  padding:15px;
  background-color:green;
  width:100px;
  margin-top:15px;
  text-decoration:none;
  margin-left:auto;
  margin-right:auto;
  
  
  
}
.arrow {
  cursor:pointer;
  text-align: center;
  padding:10px 0;
  font-size:15px;
  font-weight:bold;
  background-color:grey;
  margin-top:15px;
}
.container {
  max-width:600px;
  margin-left:auto;
  margin-right:auto; 
}
.close {
  height:75px;
  overflow:hidden;
  transition-duration: 0.3s;  
  transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
.open {
  height:215px;
  overflow: hidden;
  transition-property:height;
  -moz-transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    transition-duration: 0.3s;  
  transition-timing-function: ease-in;
}
.up {
  background-color:red; 
}
.down {
  background-color:green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="arrow"> Click here Click here<a class="btn" href="www.google.com" target="_blank">click here</a></div>
  <div class="wrap">
  <div class="row">The most effective plac elearning,’ they most likely don’t know this themselves.Well, the most effective place to start is to dig into what the person asking for this training, ACTUALLY needs. Because if they’re dumping a huge stack of content on your desk and giving you vague instructions to ‘turn it into elearning,’ they most likely don’t know this themselves.Well, the most effective place to start is to dig into what the person asking for this training.ACTUALLY needs. Because if they’re dumping a huge stack of content on your desk and giving you vague instructions to ‘turn it into elearning,’ they most likely don’t know this themselves.Well, the most effective place to start is to dig into what the person asking for this trainingACTUALLY needs. Because if they’re dumping a huge stack of content on your desk and giving you vague instructions to ‘turn it into elearning,’ they most likely don’t know this themselves.Well, the most effective place to start is to dig into what the person asking for this training</div>
  </div>
  </div>

＆＃13;

Answer 5

可接受的答案是正确的，但在最佳情况下，当您有多个嵌套元素时，您不希望取消该事件，而是要获得实际单击的父容器并使用它。

$('.clicked-container').click((e) => {
    let t = e.target;
    while (!$(t).hasClass( "clicked-container" )) { t = t.parentNode; }
     
    ...
    $(t).toggleClass('active-or-whatever-you-want');
});

当您在ES6中使用Arrows =>时，接受的答案中的“ this”也不再指向同一事物

如何停止将事件从父div传播到子div

5 个答案: