jquery - React 和 jQuery 事件处理程序以错误的顺序触发

Question

我正在创建出现在屏幕顶部的菜单。当用户单击菜单项之一时，会出现带有大量链接的 div。我不希望能够通过单击另一个菜单项(没问题，已经实现了它)来隐藏此 div，也不能通过单击此 div 和菜单项之后的任何其他位置来隐藏此 div。

我听说有两种解决方案:

• 显示菜单后面并覆盖整个屏幕的不可见 div并向其添加点击处理程序。
• 将事件处理程序附加到 document.body。

第一个对我来说不好，因为该 div 将覆盖页面上的链接，并且我希望即使在单击 menuitem 并且出现相应的 div 后也可以单击它们。所以我尝试了第二个灵魂。但问题是主体上的 jquery 单击处理程序在我的组件处理程序之前触发。我不知道如何让它首先调用我的组件处理程序，然后阻止事件传播。

这是代码和js fiddle :

/** @jsx React.DOM */
var Menu = React.createClass({
    click: function(e) {
        console.log('component handled click - should be called before jquery one and prevent jquery handler from running at all');
        e.stopPropagation();
    },
    render: function(){
    console.log("component renders");
        return (
            <div>
                <div>| MenuItem1 | MenuItem2 | MenuItem 3 |</div>
                <br />
                <div className="drop">
                    MenuItem 1 (This div appears when you click menu item)
                    <ul>
                        <li><a href="#" onClick={this.click}>Item 1 - when I click this I don't want document.body.click to fire</a></li>
                        <li><a href="#" onClick={this.click}>Item 1 - when I click this I don't want document.body.click to fire</a></li>
                    </ul>
                </div>
            </div>
        );
    }
});

React.renderComponent(<Menu />, document.getElementById("menu"));

$(document).ready(function() {
    console.log('document is ready');
    $("body").click(function() {
        console.log('jquery handled click - should not happen before component handled click');
    });
});

http://jsfiddle.net/psonsx6j/

运行之前启动控制台以解释问题

Answer 1

所以我解决了。当您使用 jQuery 将事件处理程序添加到文档时，首先会触发此事件处理程序。所以你无法捕获事件并阻止它的传播。但是，当您使用 document.addEventlistener 附加处理程序时，该处理程序将在最后被调用，并且您有机会使用react:)以单击 React 组件。

我修改了 Mike 的代码以使其正常工作 ( http://jsfiddle.net/s8hmstzz/ ):

/** @jsx React.DOM */
var Menu = React.createClass({
    getInitialState: function() {
        return {
            show: true
        }
    },
    componentDidMount: function() {
        // when attaching with jquery this event handler is run before other handlers
        //$('body').bind('click', this.bodyClickHandler);
        document.addEventListener('click', this.bodyClickHandler);
    },
    componentWillUnmount: function() {
        //$('body').unbind('click', this.bodyClickHandler);
        document.removeEventListener('click', this.bodyClickHandler);
    },
    anchorClickHandler: function(e) {
        console.log('click on anchor - doing some stuff and then stopping propation');
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
    },
    bodyClickHandler: function(e) {
        console.log('bodyclickhandler');
        this.setState({show: false})
    },
    clickHandler: function(e) {
        // react to click on menu item
    },
    preventEventBubbling: function(e) {
        console.log('click on div - stopping propagation');
        e.stopPropagation();
        e.nativeEvent.stopImmediatePropagation();
    },
    render: function() {
        return (
            <div>
                <a href="#" onClick={this.anchorClickHandler}>Link - will stop propagation</a>
                <div id="menudrop" onClick={this.preventEventBubbling} style={{display: this.state.show ? 'block' : 'none'}}>
                    <ul>
                        <li onClick={this.clickHandler}>Menu Item</li>
                    </ul>
                </div>
            </div>
        )
    }
});

React.renderComponent(<Menu />, document.getElementById('menu'));

启动控制台，然后单击 div、anchor 和 body 以查看其工作原理。我不知道为什么使用 addEventListener 而不是 jQuery 会改变事件处理程序的触发顺序。