Question

我正在努力获得正确的jQuery选择器来点击某个元素。这是我的HTML：

<label class="title-label" for="me">Some Title<i class="fa fa-times del-class"></i></label>

我有两个独立的jQuery监听器：

$(document).on("click", ".title-label", function (e) { //magic happens here

另一个：

$(document).on("click", ".del-class", function (e) { //the whole label gets deleted

当我点击标签时，我向服务器发送.ajax请求并发生魔术。还有一个i图标用于删除整个标签，也可以使用。但是，当我点击.del-class图标时，它会首先触发.title-label上的点击，该点击将请求发送到服务器，魔术发生，然后标签被删除。图标需要保留在标签内，但是当我点击它时，它不应该触发标签上的点击和魔术，而是立即删除标签。

我尝试了各种尝试来包含:not选择器，如下所示：

:not('.del-class') .title-label

但两者总是被触发。任何线索在这种情况下正确的选择器是什么？

Answer 1

您可以使用e.stopPropagation()来防止事件冒泡DOM树，从而阻止任何父处理程序收到事件通知。

$(document).on("click", ".title-label", function(e) {
  console.log('title-label click');
});

$(document).on("click", ".del-class", function(e) {
  e.stopPropagation();  //Add
  console.log('del-class click');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="title-label" for="me">Some Title<i class="fa fa-times del-class"> Other text </i></label>

Answer 2

您可以检查event.target是否是图标，并在if/else声明中执行操作。

见下文

＆＃13;

$(document).on("click", ".title-label", function(e) {
let tgt = e.target
      if (!$(tgt).is('.del-class ') ) {
          console.log('do magic now')
        }
        else {
          console.log('delete label straight away')
        }
    //or
    
    !$(tgt).is('.del-class ') ? console.log('do magic now') : console.log('delete label straight away')
        
})

＆＃13;

i {
  width: 20px;
  height: 20px;
  background: Red;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label class="title-label" for="me">Some Title<i class="fa fa-times del-class"></i></label>

＆＃13;

Answer 3

如果我做对了，你有2个元素，其中一个在另一个元素内，如果你需要2个独立的监听器，你需要对子元素使用event.stopPropagation（）。

实施例： How to query for newly created property in NDB?

$('.parent_div_click').on('click',function(event){
    console.log('click in parent');
});
$('.child_i_click').on('click',function(event){
        event.stopPropagation();
    console.log('click in child');
});

希望这会有所帮助

jQuery：点击元素，不包括对子元素的点击

3 个答案: