Prevent onClick event by clicking on a child div

Question

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

Check event bubbling and propagation subjects. You should stop event propagation to the parent from the inner div. — Ali Somay, Oct 10 '16 at 12:06
Your problem is the effect of an event on another div than the target div. Then stop propagation for those. Because the others wont recieve the click event. So the modal won't close. http://www.w3schools.com/jsref/event_stopimmediatepropagation.asp — Ali Somay, Oct 10 '16 at 12:10

score 9 · Accepted Answer · edited Oct 13 '17 at 05:42

9

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?

edited Oct 13 '17 at 05:42

Glen Pierce

4,401
5
31
50

answered Oct 10 '16 at 12:33

meandmax

114
6

1

It would help If I don't have any other functions inside inner div. But in my case I have a form inside a inner div, thus, that doesn't work. Every input field has onChange event and the form button has onClick event. If I use `e.stopPropagation()` then they do not work. – Boky Oct 10 '16 at 12:37
It should work nonetheless. How are you attaching those events? – Jonas Grumann Oct 10 '16 at 12:39

dashdashzako · Answer 2 · 2016-10-10T12:23:56.260

0

You could use JS Event.stopPropagation to prevent event from bubbling to the parent if inner element is clicked.

edited Oct 10 '16 at 12:23

answered Oct 10 '16 at 12:08

dashdashzako

1,268
15
24

Pointer events: none; is the other way around. It'll make a div transparent to clicks. I don't think there's a pointer-events: block equivalent. – Jonas Grumann Oct 10 '16 at 12:12
@JonasGrumann I may have misunderstood what Boky wants, but isn't that he want to disable any mouse event on the inner `div`? – dashdashzako Oct 10 '16 at 12:19
@damienc I have an form inside this modal. Thus, that isn't working. Because all input field have a onChange function. – Boky Oct 10 '16 at 12:20
Ah yes sorry. @Boky can't you use `Event.currentTarget` to filter the event? – dashdashzako Oct 10 '16 at 12:22
If I use `event.currentTarget.id`, then both divs, outter and inner have a id value of outter div no matter that outter div has id `outter` and inner div `inner` – Boky Oct 10 '16 at 12:34

Prevent onClick event by clicking on a child div

2 Answers2

Linked

Related