Question

似乎有点琐碎，但我很难解决它，我有一个jquery函数来选择点击标签的类，但问题是它选择了标签下面的所有其他标签以及结构顺序因为我只想要第一个

例如，如果我有

<div class="1">
  <div class="2">
      <div class="3">
          <p class="4">Hello World</p>
      </div>
  </div>
</div>

然后我点击了（p）标签，上面写着hello world我会收到警报说4然后3然后2然后1 但就像我说我只希望第一个女巫在这种情况下是4

这是我的jquery代码

$("*").dblclick(function(){
    if(!$(this).hasClass("") && !$(this).hasClass("main")){
        alert($(this).attr('class'));
    }
});

我知道问题正在发生，因为从技术上讲，我点击了所有的标签，所以它继续循环低谷但我仍然需要一种方法来打破它后，选择第一个类或更好但有一种方法只选择最顶层的对象

Answer 1

只需像这样添加返回函数：

$("*").dblclick(function(){
if(!$(this).hasClass("") && !$(this).hasClass("main")){
    alert($(this).attr('class'));
    return false;
}
});

Answer 2

我会将事件传递给您的click函数，并在完成逻辑后使用event.stopPropagation（）。这可以防止事件冒泡到父元素

$("*").dblclick(function(event){
    if(!$(this).hasClass("") && !$(this).hasClass("main")){
        alert($(this).attr('class'));
    }
    event.stopPropagation();
});

Answer 3

运行此示例并查看您的控制台。

<template>
  <section class="au-animate">
    <h2>${heading}</h2>
    <br>
    <ul style="list-style-type:none">
      <li><button type="button" class="btn btn-info" style="margin:1px" click.delegate="dist/periods.js">Current Period</button></li>
    <br>
    <li><button type="button" class="btn btn-info" style="margin:1px">Past Period Mango</button></li>
    <li><button type="button" class="btn btn-info" style="margin:1px">Past Period Pommelo</button></li>
    <li><button type="button" class="btn btn-info" style="margin:1px">Past Period Kiwi</button></li>
    <li><button type="button" class="btn btn-info" style="margin:1px">Past Period Clementine</button></li>
    </ul>
  </section>
</template>

$("body > div").dblclick(function(){
   console.log($(this).attr('class'));
});

Answer 4

您应该阅读event bubbling和event propagation。

这是完成你想要的功能：

$("*").dblclick(function(e){
    if(!$(this).hasClass("") && !$(this).hasClass("main")){
        alert($(this).attr('class'));
        e.stopPropagation();
    }
});

以下是工作示例： https://jsfiddle.net/18sawk57/

虽然附加事件监听页面上的所有标记并不是一个好的解决方案。更好的解决方案是为应该监听事件的元素添加例如id或clickable class attribute。

以下是另一个更好的方法的工作示例：https://jsfiddle.net/tr7aqask/

这是另一个使用jquery禁用冒泡的工作示例：https://jsfiddle.net/yc0481sm/

jquery选择单标签类onclick

4 个答案: