通过单击子 div 来防止 onClick 事件 [英] Prevent onClick event by clicking on a child div

查看：72
本文介绍了通过单击子 div 来防止 onClick 事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

我有一个外部 div，它是整个身体，而我有一个内部 div.如果在内部 div 之外单击，我想应用该函数来关闭模态.

我的代码如下:

popupOutterDivStyle() {返回 {zIndex: 10000,位置:固定"，宽度:100%"，高度:100%"，顶部:0，左:0，背景:RGBA(102,102,102,0.8)"}}popupInnerDivStyle() {返回 {zIndex: 20000,位置:固定"，宽度:70%"，顶部:50%"，左:50%"，高度:400px"，marginTop: "-200px",/*设置为你身高的1/2的负数*/marginLeft: "-35%",/*设置为宽度的1/2的负数*/背景:RGBA(255,255,255,1)"，显示:'块'}}关闭弹出图标(){返回 {位置:绝对"，右:-25，顶部: - 27，zIndex: 30000,光标:指针"}}使成为() {const 动画设置 = {过渡名称:示例"，过渡进入超时:500，过渡出现超时:500，transitionLeaveTimeout: 500,过渡出现:真实，transitionLeave: 真};返回 (<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}

</ReactCSSTransitionGroup>

);}

当我点击带有图标的链接或点击内部 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}

</ReactCSSTransitionGroup>

和 this.props.children 在我的例子中是一个联系表格:

导出默认类 ContactForm extends React.Component {构造函数(道具){超级(道具)；this.state = {发件人名称: ''，电子邮件: ''，信息: ''，错误:{}};this.sendingHandle = this.sendingHandle.bind(this);this.contactHandle = this.contactHandle.bind(this);}接触句柄(事件){让字段 = event.target.name;让值 = event.target.value;控制台日志(字段)；}发送句柄(事件){event.preventDefault();}使成为() {const 语言 = this.props.currentLanguage.homePage;返回 (<div className="联系表单"><表格><div className="col-lg-12 col-md-12 col-sm-12 col-xs-12"><文本输入类型=文本"姓名=发件人姓名"label={language.contactNameLabel}labelClass="contactLabel"placeholder={language.contactNameLabel}类名=模板输入"图标=用户"图标大小=15x"iconClass="contactFaIcon"onChange={this.contactHandle}值={this.state.name}错误={this.state.errors.senderName}/>
<div className="col-lg-12 col-md-12 col-sm-12 col-xs-12"><文本输入类型=文本"名称=电子邮件"标签={language.contactEmailLabel}labelClass="contactLabel"placeholder={language.contactEmailLabel}类名=模板输入"图标 =信封-o"图标大小=15x"iconClass="contactFaIcon"onChange={this.contactHandle}值={this.state.email}错误={this.state.errors.email}/>
<div className="col-md-12 col-sm-12 col-xs-12"><文本区域类名=消息"名称=消息"placeholder={language.contactMessageLabel}标签={language.contactMessageLabel}labelClass="contactLabel"图标=评论-o"图标大小=15x"iconClass="contactFaIcon"onChange={this.contactHandle}错误={this.state.errors.message}/>
<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 className="clearfix"/>
);}}

解决方案

将函数附加到停止传播的内部 div.

 函数 stopPropagation(e) {e.stopPropagation();}

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

这对您有帮助吗:ReactJS SyntheticEvent stopPropagation() 仅适用于反应事件?

I'm trying to create a modal in React JS

I have one outter div which is the whole body and I have I inner div. I want to apply the function to close the modal if it's clicked outside of the inner div.

My code is as follows :

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>

    );
}

When I click on link with the icon or when I click outside of the inner div it's working fine.

But the problem is that it's closed also if I clicked inside the inner div.

I do not want to use jquery.

Any advice?

UPDATE

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>

And this.props.children in my case is a contact form :

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>
    );
}
}

解决方案

Attach a function to the inner div which stops propagation.

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

In your case <div style={this.popupInnerDivStyle()} onClick={stopPropagation}>

Does this help you: ReactJS SyntheticEvent stopPropagation() only works with React events?

这篇关于通过单击子 div 来防止 onClick 事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆