Question

是否可以从jquery点击事件中排除元素？我的问题的简化版本是：

CSS

.outerbox{
 height:100px;
 width:100px;
 background-color:red;
 position:relative;
 }

 .innerbox{
 height:50px;
 width:50px;
 background-color:yellow;
 margin:auto;
 position: absolute;
 top: 25%;
 left: 25%;
 }

HTML

 <div class="outerbox">
   <div class="innerbox"></div>
 </div>

JQUERY

 $(".outerbox").not(".innerbox").click(function() {
   alert( "Red has been clicked, but not the yellow area" );
 });

我的非选择器不起作用。我也尝试了$（“。outerbox：not（'。innerbox'）”），没有效果。我有什么想法可以做到这一点吗？

Answer 1

您不能停止拥有点击事件的元素，但您可以捕获该点击事件并阻止它通过DOM传播。因此，您可以正常使用外部点击事件处理程序：

$(".outerbox").click(function() {
  alert( "Red has been clicked, but not the yellow area" );
});

还为“inner”元素添加了一个单击处理程序，它只取消了该事件：

$(".innerbox").click(function(e) {
  e.stopPropagation();
});

Example

Answer 2

您可以使用事件引发的target属性：

$(".outerbox").on('click', function(event) {
   var trg = $(event.target);
   if (trg.hasClass('innerbox')) {
      // Inner was clicked
   }
})

Answer 3

用这个::

替换你的JS代码

$(".outerbox").click(function(event) {
    if($(event.target).attr('class') == 'outerbox')
        alert( "Red has been clicked, but not the yellow area" );
 });

Answer 4

除非你没有对innerbox点击做任何事情，否则我会检查目标。

demo on jsfiddle

$(".outerbox").on('click', function(e) {
   if (e.target.classList.contains('innerbox')) {
        return false;
   }

   // your code here
});

Answer 5

这完全是关于事件冒泡，而不是jQuery选择器问题。

click事件具有e.eventPhase属性，指示当前正在评估事件流的哪个阶段。

e.eventPhase取值：

Event.NONE：0
Event.CAPTURING_PHASE：1
Event.AT_TARGET：2
Event.BUBBLING_PHASE：3

在事件处理程序中，点击红色方块后，您会看到e.eventPhase == 2，点击黄色方块，您会看到e.eventPhase == 3。

因此，以下任何一项都会产生预期的效果：

$(".outerbox").click(function(e) {
    if(e.eventPhase !== Event.BUBBLING_PHASE) {
        // here, clicks on any of the target's child elements are excluded.
        alert( "Red has been clicked, but not the yellow area");
    }
});

或

$(".outerbox").click(function(e) {
    if(e.eventPhase === Event.AT_TARGET) {
        // here, clicks on any of the target's child elements are excluded.
        alert( "Red has been clicked, but not the yellow area");
    }
});

因此，您可以编写代码来过滤掉任意数量的后代元素的点击，甚至不知道他们的类/ ID。

<强> DEMO

用jquery

5 个答案: