jQuery on Click Outside Hide DIV

在编写网页或应用程序时，我们经常需要在用户点击页面的其他区域时隐藏某些元素。使用jQuery的on()函数和事件委托可以轻松地实现此目标。

思路

当点击页面时，我们需要检查点击事件的目标元素是否是需要隐藏的div或其内部的元素。 如果不是，则隐藏该div。

在jQuery中，我们可以使用以下代码来实现：

$(document).on('click', function(e) {
  var target = $(e.target);
  if (!target.is('#div-id') && !target.closest('#div-id').length) {
    $('#div-id').hide();
  }
});

该代码将在document对象上绑定一个click事件，并在每次单击事件发生时执行一个回调函数。 在回调函数中，我们首先通过e.target获得被点击的元素。然后，通过target.is()检查元素是否是我们要隐藏的div或其内部的元素。如果不是，我们将通过$('#div-id').hide()将其隐藏。

完整示例

HTML代码

<div id="my-div">click me</div>

Javascript代码

$(document).on('click', function(e) {
  var target = $(e.target);
  if (!target.is('#my-div') && !target.closest('#my-div').length) {
    $('#my-div').hide();
  }
});

$('#my-div').on('click', function(e) {
  e.stopPropagation();
});

第一个代码块绑定在document对象上，以便点击事件能够在全局范围内工作。 第二个块绑定在需要隐藏的div上，并阻止单击事件向父元素传播，以避免引起错误行为。

总结

通过使用jQuery的事件委托，我们可以方便地实现在用户单击页面上其他区域时隐藏指定元素的功能。 在使用这种技术时，请注意避免跨域问题和性能问题。