Mouse release triggers ‘onClick’ event

Suppose I have the following React component:

<div onClick={closeModal} id='modal'>
      <div onClick={e => e.stopPropagation()} id='modal_content'>
            {children}
      </div>
</div>

where #modal is the parent and #modal_content is the children. Clicking on #modal would close the modal. Because of that #modal_content stops the propogation so only clicking on #modal actually closes the modal. And now the problem: If I press down the mouse while it’s over #modal_content and then release the mouse when it’s over #modal, onClick event attached to the #modal triggers closing the modal. I.e I’m actually listening to mouse release instead of a full click process(press & release). How can I make #modal to listen to a full mouse click instead of mouse release only?

Answer

Okay seems like I needed a wrapper around and put the event on it