Javascript JS中通过事件传播的popover

我试图在React中创建一个popover（尽管我不认为它是React特有的）。要关闭popover，请单击外部，我将向

document.body

添加一个单击事件侦听器，它将关闭popover，并向popover的最顶端节点添加另一个事件侦听器，它将停止事件传播（因此它不会到达正文）

我的代码是否有错误，或者我的方法是否完全不正确？我看到的是（如果我没有关闭popover），body事件首先被触发，然后popover click事件被触发

var Popover = React.createClass({
    componentWillMount() {
        document.body.addEventListener('click', this.handleDocumentClick);
    },
    componentWillUnmount() {
        document.body.removeEventListener('click', this.handleDocumentClick);
    },
    handleDocumentClick(e) {
        console.log('triggered from document document', e);
        this.props.onClose();
    },
    handleSelfClick(e) {
        console.log('triggered from popover', e);
        e.preventDefault();
        e.stopPropagation();
    },
    render() {
        var { top, left, width } = this.props;

        return (
            <div key={ `${top}:${left}` } className='popover top' style={{ top, left, width }} onClick={ this.handleSelfClick }>
                <div className='popover-arrow-top' style={{ left }} />
                <div className='popover-content'>
                    { this.props.children }
                </div>
            </div>
        );
    }
});

---

试试看

document.addEventListener

而不是运气不好。不过现在已经修好了。无论如何谢谢你！

componentWillMount() {
    document.addEventListener('click', this.handleDocumentClick);
},
componentWillUnmount() {
    document.removeEventListener('click', this.handleDocumentClick);
},
handleDocumentClick(e) {
    var self = this.getDOMNode();
    var { onClose } = this.props;

    (function searchParent (currentTarget) {
        if (!currentTarget) {
            onClose(); // Clicked body
        } else if (currentTarget !== self) {
            searchParent(currentTarget.parentNode);
        } // else was in popover, stop iteration
    })(e.target);
}, ...