2015-10-16 39 views
0

似乎有点琐碎,但我有一个难以解决的问题,我有一个jquery函数来选择点击标签的类,但问题是,它选择标签下面的每个其他标签点击以及在结构顺序在那里,我只希望最前面的一个jquery select单个标签类onclick

例如,如果我有

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

,我点击了(p)标签,上面写着世界你好我会得到一个警告 说4然后3然后2然后1 ,但像我说我只想要第一个女巫在这种情况下是4

这里是我的jQuery代码

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

我知道问题发生,因为技术上我很点击所有的标签,因此continus循环低谷,但我仍然需要一种方法头等后打破它选择或者更好的是有没有办法只选择最顶层的对象

+1

使用'event.stopPropagation()'或'返回false;'从事件处理程序 – Tushar

+0

刚刚看了一下'事件bubbling'和'事件capturing' –

回答

1

只需添加返回功能,像这样:

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

小case'返回false;' – Tushar

+0

花花公子感谢你生命的救星这样一个微小的问题,但它采取了我的大部分时间,每天的 – user2692997

+0

请问但你为什么选择所有课程?让我发布一个更有效的答案示例,基于给定的逻辑,除非htis仅用于演示原因。 – Casey

1

我会在事件传递给你的点击函数,并且在完成逻辑之后,使用event.stopPropagation()。这可以防止事件冒泡到父元素

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

'!$(this).hasClass(“”)'不需要 – Tushar

+0

这也是一个很好的解决方案。我会给出这个答案。 – Casey

0

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

$("body > div").dblclick(function(){ 
 
    console.log($(this).attr('class')); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="1"> 
 
    <div class="2"> 
 
     <div class="3"> 
 
      <p class="4">Hello World</p> 
 
     </div> 
 
    </div> 
 
</div>

0

你应该阅读有关event bubblingevent propagation

这里是函数,你想要做什么:

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

这里是工作示例: https://jsfiddle.net/18sawk57/

尽管这不是一个很好的解决侦听事件附加到所有标签的页面上。更好的解决方案是为例如idclickable class attribute添加应该有事件监听的元素。

这里是一个更好的方法另一实施:https://jsfiddle.net/tr7aqask/

这里是用鼓泡禁止使用jQuery另一实施:https://jsfiddle.net/yc0481sm/