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现在已经失宠了，你可能想把它作为包装组件来实现，但这是一个很好的起点。

外部点击隐藏上下文菜单

3 个答案: