在外部单击上隐藏上下文菜单

Question

当您在<div>内单击鼠标右键时，将显示一个上下文菜单，并且仅当用户再次在<div>内单击鼠标左键时，该菜单才会消失。 当用户单击页面上的任意位置时，如何隐藏它？

我的小提琴

Answer 1

将这两个函数更改为以下内容：

_onPageClick: function(e) {
   e.stopPropagation()
   if (this.refs.contextMenu.getDOMNode() !== e.target){
     this.contextMenu.setState({contextMenuLocation: ''});
   }
},

componentDidMount: function(){
    this.contextMenu = this.refs.contextMenu;
    document.addEventListener('click', this._onPageClick)
},

我们要做的就是将_onPageClick从包装div移到文档的侦听器。 如果用户单击上下文菜单内没有的任何位置，则以上代码将关闭菜单。 如果您还希望在用户单击上下文菜单时将其关闭，则将_onPageClick更改为：

_onPageClick: function(e) {
   e.stopPropagation()
   this.contextMenu.setState({contextMenuLocation: ''});
}

（同样，包装div不应再具有onClick处理程序） http://jsfiddle.net/yikevinqu/eeu9unhm/1/

Answer 2

查看Ben Alman的clickoutside jQuery插件。 即使您没有使用jQuery，您也可以查看他的机制，以在这些单击事件冒泡时捕获它们。

http://benalman.com/projects/jquery-outside-events-plugin/

所有单击事件都会通过DOM冒泡，因此，如果单击一个内部元素，则如果没有event.stopPropagation() ，它将冒泡到父元素。 因此，只需单击父元素即可（甚至可以是隐藏上下文菜单的document ）。

查看我的小提琴以获得纯JS示例： http : //jsfiddle.net/jsc8zLaj/

Answer 3

npm上实际上有一个现有的React mixin，您可以使用它：

https://github.com/Pomax/react-onclickoutside

由于mixins现在已不再受欢迎，因此您可能希望将其实现为包装器组件，但这是一个很好的起点。