通过点击子div来防止onClick事件

Question

我正在尝试在React JS中创建一个模态框。

我有一个外部div，它是整个页面的主体，还有一个内部div。我想应用一个函数，以便在点击内部div之外的区域时关闭模态框。

我的代码如下：

popupOutterDivStyle() {
    return {
        zIndex: 10000,
        position: "fixed",
        width: "100%",
        height: "100%",
        top: 0,
        left: 0,
        background: "rgba(102,102,102,0.8)"
    }
}

popupInnerDivStyle() {
    return {
        zIndex: 20000,
        position: "fixed",
        width: "70%",
        top: "50%",
        left: "50%",
        height: "400px",
        marginTop: "-200px", /*set to a negative number 1/2 of your height*/
        marginLeft: "-35%", /*set to a negative number 1/2 of your width*/
        background: "rgba(255,255,255,1)",
        display: 'block'
    }
}

closePopupIcon() {
    return {
        position: "absolute",
        right: -25,
        top: - 27,
        zIndex: 30000,
        cursor: "pointer"
    }
}

render() {

    const animationSettings = {
        transitionName: "example",
        transitionEnterTimeout: 500,
        transitionAppearTimeout: 500,
        transitionLeaveTimeout: 500,
        transitionAppear: true,
        transitionLeave: true
    };

    return (

        <div onClick={this.props.closeModal}>
            <ReactCSSTransitionGroup {...animationSettings}>
            <div key={this.props.modalState} style={this.popupOutterDivStyle()} className={showModal}>

                <div style={this.popupInnerDivStyle()}>
                    <a href="#" style={this.closePopupIcon()} onClick={this.props.closeModal}><i className="closePopup ion-ios-close-empty" /></a>
                    {this.props.children}
                </div>

            </div>
            </ReactCSSTransitionGroup>
        </div>

    );
}

当我点击带有图标的链接或者点击内部div之外时，它可以正常工作。

但问题在于，如果我在内部div中点击，它也会关闭。

我不想使用jquery。

有什么建议吗？

更新：

stopPropagation(event){
    event.stopPropagation();
}


<div>
    <ReactCSSTransitionGroup {...animationSettings}>
     <div id="outter" key={this.props.modalState} style={this.popupOutterDivStyle()} className={showModal} onClick={this.props.closeModal}>

     <div id="inner" style={this.popupInnerDivStyle()} onClick={this.stopPropagation.bind(this)}>
          <a href="#" style={this.closePopupIcon()} onClick={this.props.closeModal}><i className="closePopup ion-ios-close-empty" /></a>
          {this.props.children}
      </div>

    </div>
    </ReactCSSTransitionGroup>
</div>

在我的情况下，this.props.children 是一个联系表单：

export default class ContactForm extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        senderName: '',
        email: '',
        message: '',
        errors: {}
    };

    this.sendingHandle = this.sendingHandle.bind(this);
    this.contactHandle = this.contactHandle.bind(this);
}

contactHandle(event) {
    let field = event.target.name;
    let value = event.target.value;
    console.log(field);
}


sendingHandle(event) {
    event.preventDefault();
}


render() {
    const language = this.props.currentLanguage.homePage;

    return (
        <div className="contact-form">
            <form>
                <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                    <TextInput
                        type="text"
                        name="senderName"
                        label={language.contactNameLabel}
                        labelClass="contactLabel"
                        placeholder={language.contactNameLabel}
                        className="templateInput"
                        icon="user"
                        iconSize="15x"
                        iconClass="contactFaIcon"
                        onChange={this.contactHandle}
                        value={this.state.name}
                        errors={this.state.errors.senderName}

                    />

                </div>
                <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <TextInput
                        type="text"
                        name="email"
                        label={language.contactEmailLabel}
                        labelClass="contactLabel"
                        placeholder={language.contactEmailLabel}
                        className="templateInput"
                        icon="envelope-o"
                        iconSize="15x"
                        iconClass="contactFaIcon"
                        onChange={this.contactHandle}
                        value={this.state.email}
                        errors={this.state.errors.email}
                    />
                </div>

                <div className="col-md-12 col-sm-12 col-xs-12">
                                    <Textarea
                                        className="message"
                                        name="message"
                                        placeholder={language.contactMessageLabel}
                                        label={language.contactMessageLabel}
                                        labelClass="contactLabel"
                                        icon="comments-o"
                                        iconSize="15x"
                                        iconClass="contactFaIcon"
                                        onChange={this.contactHandle}
                                        errors={this.state.errors.message}
                                    />
                </div>
                <div className="col-lg-12 col-md-12 col-sm-12 col-xs-12 text-center">
                    <Button text="Verzenden" handleClick={this.sendingHandle.bind(this)}/>
                </div>
            </form>
            <div className="clearfix" />
        </div>
    );
}
}

- Boky

---

检查事件冒泡和传播主题。您应该阻止来自内部div的事件传播到父元素。 - Ali Somay

那不会是一个模态窗口，而是无模式窗口... - Teemu

你的问题是事件对目标 div 以外的另一个 div 产生了影响。因此，请为这些 div 停止传播。因为其他 div 不会接收到单击事件，所以弹出窗口将不会关闭。http://www.w3schools.com/jsref/event_stopimmediatepropagation.asp - Ali Somay

Answer 1

将一个函数附加到内部div，以停止事件传播。

   function stopPropagation(e) {
      e.stopPropagation();
   }

在您的情况下，<div style={this.popupInnerDivStyle()} onClick={stopPropagation}>。

这个链接对你有帮助吗：ReactJS合成事件stopPropagation()仅在React事件中起作用吗？

- meandmax

---

如果内部div中没有其他函数，那将会很有帮助。但在我的情况下，我在内部div中有一个表单，因此这种方法不起作用。每个输入字段都有onChange事件，表单按钮有onClick事件。如果我使用e.stopPropagation()，它们就无法正常工作。 - Boky

它应该仍然能够正常工作。你是如何绑定那些事件的？ - Jonas Grumann

Answer 2

如果内部元素被点击，您可以使用JS Event.stopPropagation来防止事件冒泡到父级。

- dashdashzako

---

指针事件：none; 是相反的方式。它会使一个 div 对点击透明。我认为没有 pointer-events: block 的等效方式。 - Jonas Grumann

@JonasGrumann 我可能误解了Boky的意思，但他不是想要禁用内部div上的任何鼠标事件吗？ - dashdashzako

@damienc，我有一个表单在这个模态框里面。因此，它不起作用。因为所有的输入字段都有一个onChange函数。 - Boky

啊，对不起。@Boky，你不能使用Event.currentTarget来过滤事件吗？ - dashdashzako

如果我使用 event.currentTarget.id，那么无论外部div的id是outter还是内部div的id是inner，两个div都会有一个id值为外部div的id。 - Boky