Question

我有类似http://jsfiddle.net/4bzvp7o2/的内容，我想在点击时排除#bar元素参与切换功能。

因此，如果在蓝色部分可见时点击蓝色部分，则不会发生任何事情，我已经尝试过......

$('#foo').not('#bar').click(function ()

Answer 1

查看您的案例对了解事件冒泡非常有用。如果你有一个绑定在父元素上的事件，在你的情况下是$('#foo')点击时做某事，有时候人们需要在点击子元素时做一些其他的事情，在你的情况下是{{1} }。

当您点击DOM层次结构深处的元素时，其上发生的事件将遍历所有父节点。

您需要$('#bar')来阻止事件冒泡到父节点：

event.stopPropagation()

$(document).ready(function() {
  $('#foo').click(function() {
    $('#bar').toggle('fast')
  });
  $('#bar').click(function(e) {
    e.stopPropagation(); // stops the event to bubble up to the parent element.
  });
})

#foo {
  width: 100px;
  height: 100px;
  background-color: yellow;
}
#bar {
  width: 50px;
  height: 50px;
  background-color: blue;
}

Answer 2

Codepen http://codepen.io/noobskie/pen/jbLerX

您需要使用e.stopPropagation();

$(document).ready(function() {
  $('#foo').click(function() {
    $('#foo').find('#bar').toggle('fast')
  })
  $('#bar').click(function(e) {
    e.stopPropagation();
  });
})

Answer 3

如果目标元素为条形，您可以检查单击目标元素，而不是触发切换。请参阅以下代码段。

    $('#foo').click(function (e) {
        if(!$(e.target).hasClass("bar")){
            $('#foo').find('#bar').toggle('fast');
        }
    });

您还可以看到 fiddle 。

Answer 4

一种方法：http://jsfiddle.net/4bzvp7o2/2/

$(document).ready(function () {
    $('#foo').on('click', function (evt) {
        if (evt.originalEvent.target.id === 'bar') {
            return false;
        }
        $('#foo').find('#bar').toggle('fast');
    })
})

如何从jquery .click（）中排除元素

4 个答案: