22

使用 jQuery 如何检测不是特定元素的点击，并因此执行一项操作？

我有以下 JavaScript

$('#master').click(function() {
    $('#slave').toggle();
});

$(document).not('#master','#slave').click(function() {
    $('#slave').hide();
});

而且我看不出我在逻辑上哪里出错了。你可以在这里看到一个活生生的例子

4

6 回答 6

53

由于您绑定到click文档上的事件，您可以使用event.target来获取启动事件的元素：

$(document).click(function(event) {
    if (!$(event.target).is("#master, #slave")) {
        $("#slave").hide();
    }
});

编辑：正如 Mattias 在他的评论中正确指出的那样，上面的代码将无法识别来自#masterand的后代的点击事件#slave（如果有的话）。在这种情况下，您可以使用close()来检查事件的目标：

$(document).click(function(event) {
    if (!$(event.target).closest("#master, #slave").length) {
        $("#slave").hide();
    }
});
于 2012-06-01T13:38:54.167 回答
3

这段代码是否符合您的要求？（不完全确定我是否理解正确）

$('body').on('click', '*:not( #master, #slave )', function() {
    $('#slave').hide();
});

http://jsfiddle.net/gZ4Hz/8/

于 2012-06-01T13:42:09.293 回答
2

jQuery 长期以来一直支持事件委托。困难在于创建合适的选择器。最初delegate是使用的，但最近on应该使用委托形式。

事件委托的目的是侦听子元素上的事件并调用这些元素上的绑定事件处理程序，就好像它们已绑定到子元素而不是父元素一样。这意味着不是将处理程序绑定到DOM 中的每个元素，而是将处理程序绑定到初始选择中的每个元素（document是单个元素）。这也提供了一种使用单个选择器绑定到不断变化的元素集的简单方法，因为新元素将传播它们的事件以document判断它们在初始事件处理程序被绑定时是否存在：

$(document).on('click', '*:not(#master, #master *, #slave, #slave *)', function (e) {
    //this will reference the clicked element
});

另外，请注意，我不仅说元素不能是#masteror #slave，它们也不能是#masteror的子元素#slave。

于 2012-09-03T22:22:59.613 回答
1

另一个想法，它可能无法正常工作，因为您的浏览器可能没有body以 100% 的高度呈现；尝试调整你的基础 css 来固定身体的高度，然后再考虑其他一些想法。

e.stopPropagation()：防止事件在 DOM 树中冒泡，防止任何父处理程序收到事件通知。

因此，如果您将第一次点击代码更改为以下内容：

$('#master').click(function(e) {
    e.stopPropagation();
    $('#slave').toggle();
});

然后你也可以改变第二个的呼号：

$("body, body *").not('#master, #slave').click(function(e) {
    $('#slave').hide();
});

这应该涵盖它。试试看！或者看到这个 jsFiddle

于 2012-06-01T13:49:49.777 回答
0

Fredrik 的答案适用于文档中已经存在的元素，但不适用于通过 ajax 调用获取的元素。我尝试了以下方法，它对我有用。为未来的 ajax 编码人员共享代码。

    $(document).on('click',function(event) {
        if (!$(event.target).closest("#selector").length) {
            if ($('#selector').is(":visible"))
                $('#selector').slideUp();
        }
    });

会发布它作为评论，但我没有足够的声誉。

于 2013-09-11T11:32:45.810 回答
0 
$('.clickable-row').on("click",function(){
  window.location = $(this).data('href');
  return false;
});
$("td > a").on("click",function(e){
  e.stopPropagation();
});

或者

jQuery(document).ready(function($) {
    $('.clickable-row').on("click",function(){
      window.location = $(this).data('href');
      return false;
    });
    $("td > a").on("click",function(e){
        e.stopPropagation();
    });
});
于 2018-04-26T14:20:02.007 回答