单击外部框 jQuery - HTML

当用户单击页面上的元素时，通常只希望它针对特定元素进行操作。单击页面上的其他区域，则不应触发任何操作。为此，我们可以使用 jQuery 中的某些函数来检测用户何时单击了文档的其他部分，并执行相应的操作。

解决方法

我们可以通过使用 jQuery 的 click() 函数来检测用户单击页面上的元素。但是，在处理用户单击页面的其他区域时，需要使用事件委托来处理它。使用 jQuery，我们可以使用以下代码：

$(document).click(function(event) { 
    if(!$(event.target).closest('#myDiv').length) {
        // 执行你的代码
    }        
});

该代码监听文档上的单击事件，在单击时，它检测单击事件发生的位置是否在给定元素的内部。如果单击事件发生在给定元素外部，则执行相应的代码。

代码解析

$(document).click(function(event))

我们监听文档上的单击事件。这意味着单击任何地方都会触发该事件。

if(!$(event.target).closest('#myDiv').length)

使用 $(event.target).closest('#myDiv') 检测单击事件是否在 myDiv 元素的内部发生。如果是，则返回 true，否则返回 false。因为我们只对点击了 myDiv 元素之外的位置感兴趣，所以我们使用! 对检查的结果求取反。如果返回 false，则 myDiv 的内部被点击，这时我们不会执行代码。如果返回 true，则单击事件发生在 myDiv 的外部，我们将执行代码。

结论

使用 jQuery 监听单击事件来处理页面上的元素是非常有用的。通过使用事件委托和检测单击事件是否在给定元素的内部，我们可以轻松地处理页面上各种事件。