根据条件排除点击事件？

Posted 2023-03-14

【中文标题】根据条件排除点击事件？

【英文标题】：Exclude click event based on condition?

【发布时间】：2011-05-18 13:38:57

【问题描述】：

我正在尝试为 jQuery 事件设置条件。我有一个输入元素和一个 div。我想检测页面上任意位置的点击并执行该方法，但前提是点击不在输入或 div 上。

【问题讨论】：

那么您是说您希望能够在用户点击页面并且不在输入或 div 上的任何时候调用函数？

【参考方案1】：

这样的事情应该可以工作。

$('body').click(function(event) // body click
    var $target = $(event.target); // click target
    if($target.is('#mydiv, #myinput'))  // click target is div or input
        $target.click(); // click div or input
    
);

【参考方案2】：

使用通配符排除特定元素的示例：

$("#mydiv li").click(function(e)

        var Target = new String(e.target.id);

        // prevent action when a element with id containing 'img_' is clicked
        if( !Target.match(/img_/ )) 
            // do something
        

);

【参考方案3】：

使用 jQuery click() 或 live() 函数，然后使用 jQuery is() 函数检查点击事件的目标。

在文档上绑定点击事件 如果目标不输入或div继续

.

$(document.body).click(function(e) 
  if( !$(e.target).is("input, div") ) 
    console.log("Run function because image or div were not clicked!");
  
);

示例网页 => http://mikegrace.s3.amazonaws.com/forums/stack-overflow/example-document-click-exclusion.html

点击示例页面后的示例萤火虫输出

【讨论】：

@Mike 无需将其冒泡到文档节点。 BODY 元素就够了。

@codemonkey，很高兴这对你有用。祝你的项目好运。

@Mike 使用 $(document.body) 或 $("body") - 第一个更好。

@Šime，很有趣。为什么说 $(document.body) 比 $("body") 好？

@Mike document.body 是一个内置引用。它在页面呈现后立即创建，并且始终存在。另一方面，"body" 是一个选择器。 $("body") 将使用 jQuery 的选择器引擎，该引擎将根据选择器进行查询。与所有查询一样，它会消耗时间和处理能力。

【参考方案4】：

var input = $("#yourInput")[0];
var div = $("#yourDiv")[0];

$(document.body).click(function(e) 
   switch ( e.target ) 
       case input: case div: return;
   
   yourMethod();
);

【参考方案5】：

基本上为页面主体分配一个点击处理程序，然后测试事件的目标元素以查看该目标元素的 id 是否与您的 div 或您的输入匹配。

$("body").click(function(evt) 
  var targetElementId = evt.target.id;

  if (!(targetElementId  == "yourDivID" || targetElementId == "yourinputId"))
  
    // your event code here.
  
);

【讨论】：

使用 $(event.target) 因为它被 jquery 事件对象标准化。 api.jquery.com/event.target

您不必规范化事件对象。 jQuery 会为您做到这一点。

另外，像这样检索 id 属性：foo.id，不是这样：$(foo).attr("id")。在这种情况下，后者只是矫枉过正。

另外，我刚刚发现已经存在对 BODY 元素的内置引用 - document.body。因此，没有必要使用选择器引擎来获取它。