Скрыть контекстное меню на внешнем клике

Question

У меня есть контекстное меню, которое появляется, когда вы щелкаете правой кнопкой мыши внутри <div>, и оно исчезает только тогда, когда пользователь снова нажимает левой кнопкой мыши внутри <div>. Как скрыть его, когда пользователь щелкнет в любом месте страницы?

мой fiddle

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 из оберточной дел до слушателя на документе. приведенный выше код закроет меню, если пользователь щелкнет в любом месте, которое не находится в контекстном меню. если вы хотите, чтобы закрыть, если пользователь нажмет контекстное меню, а, затем измените _onPageClick на:

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

(также, обертка ДИВ больше не должен иметь обработчик OnClick) http://jsfiddle.net/yikevinqu/eeu9unhm/1/

Answer 2

Заканчивать Ben Alman's clickoutside jQuery плагин. Даже если вы не используете jQuery, вы можете просмотреть его механизм для того, чтобы ловить эти события кликов, когда они пузырятся.

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

Все события нажмите получить пузырились через DOM, так что если вы нажмете внутренний элемент, если вы не event.stopPropagation(), это будет пузыриться до родительского элемента. Так что просто поймайте щелчок на родительском элементе (может даже быть document, чтобы скрыть ваше контекстное меню).

Проверьте мою скрипку для чистого примера JS: http://jsfiddle.net/jsc8zLaj/

Answer 3

Там на самом деле существующего React подмешать на НОМ вы можете использовать для этого:

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

Поскольку Примеси выпали из Олимпа , вы можете захотеть реализовать его как компонент оболочки, но это отличная отправная точка.