外部元素点击事件处理 - jQuery/JavaScript

在Web开发中，我们通常需要实现点击外部元素时隐藏特定UI元素的功能，例如菜单、下拉框、提示框等。在jQuery和原生JavaScript中，都可以通过监听文档的点击事件来实现此功能。

jQuery方法

实现原理

jQuery中的处理方式是，通过监听文档的点击事件，当点击事件的目标元素不是我们需要保留的元素时，隐藏需要隐藏的UI元素。具体实现时，可以将目标元素的class或id与需要保留的元素的class和id进行比较，如果不匹配则隐藏UI元素。

示例代码

$(document).click(function(e){
  // 需要保留的元素class
  var keptClass = '.keep';

  // 需要隐藏的UI元素
  var hiddenElement = $('#hidden-element');

  // 判断目标元素是否需要保留
  if(!$(e.target).is(keptClass) && $(e.target).closest(keptClass).length === 0){
    // 隐藏UI元素
    hiddenElement.hide();
  }
});

代码说明

1. $(document).click(function(e){...}) 监听文档的点击事件，并获取点击事件的目标元素。
2. var keptClass = '.keep'; 为需要保留的元素设定class。
3. var hiddenElement = $('#hidden-element'); 获取需要隐藏的UI元素。
4. if(!$(e.target).is(keptClass) && $(e.target).closest(keptClass).length === 0){...} 判断目标元素是否需要保留，如果不需要保留则隐藏UI元素。
5. hiddenElement.hide(); 隐藏UI元素。

JavaScript方法

实现原理

原生JavaScript中的处理方式与jQuery类似，都是通过监听文档的点击事件。不同的是，在获取目标元素时需要处理事件对象的兼容性问题。

示例代码

document.addEventListener('click', function(e){
  // 需要保留的元素class
  var keptClass = 'keep';

  // 需要隐藏的UI元素
  var hiddenElement = document.getElementById('hidden-element');

  // 判断目标元素是否需要保留
  if(e.target.className.indexOf(keptClass) === -1 && !hasParentClass(e.target, keptClass)){
    // 隐藏UI元素
    hiddenElement.style.display = 'none';
  }
});

// 辅助函数，判断目标元素的父元素中是否存在指定class
function hasParentClass(element, className){
  if(element.classList.contains(className)){
    return true;
  }else{
    if(element.parentNode){
      return hasParentClass(element.parentNode, className);
    }else{
      return false;
    }
  }
}

代码说明

1. document.addEventListener('click', function(e){...}) 监听文档的点击事件，并获取点击事件的目标元素。
2. var keptClass = 'keep'; 为需要保留的元素设定class。
3. var hiddenElement = document.getElementById('hidden-element'); 获取需要隐藏的UI元素。
4. if(e.target.className.indexOf(keptClass) === -1 && !hasParentClass(e.target, keptClass)){...} 判断目标元素是否需要保留，如果不需要保留则隐藏UI元素。
5. hiddenElement.style.display = 'none'; 隐藏UI元素。
6. function hasParentClass(element, className){...} 辅助函数，判断目标元素的父元素中是否存在指定class。