如何实现检测点击区域是否在某个元素以外
很多人都会像排名第一的答案那样做,如下:

$(window).click(function() {
//Hide the menus if visible
});

$('#menucontainer').click(function(event){
    event.stopPropagation();
});

这却会导致一个问题:点击事件停止冒泡了,可能会使得其他程序无法知道事件的发生。

那么如何做能解决这个问题呢,答案如下:

$(document).on('click', function(event) {
  if (!$(event.target).closest('#menucontainer').length) {
    // Hide the menus.
  }
});

document 监听了点击事件,判断 event target 是否是 #menucontainer 或父元素是 #menucontainer,如果不是,那你就可以知道点击区域在 #menucontainer 之外。

来源: The Dangers of Stopping Event Propagation


Doyle
844 声望16 粉丝

前端, angular, vue