I am trying to make 3 controls working together in my app and they are panel(can be open or closed from the page), modal and a color picker. Their relationship is the panel creates the modal by clicking some button in the panel and inside the modal, there is a color picker. The panel and the color picker comes from a library and the modal implemented myself. The panel has a has an event listener using the capture option on document.body (top-down event priority), so the panel will handle the mousedown event before it reaches the modal causing the panel to close while clicking on the modal created by the panel, thus closing the modal as well. To prevent this, the capture option to the mousedown event listener on the document to stop mouse down event propagate is added in the modal. Now I want to add a color picker to the modal, unfortunately, the color picker has event listeners to mouse down event to handle color selection in the color palette. If I have stop propagation on the document, the mouse down event never reaches the color picker therefore cannot pick color. I would like to know if there is any way to solve this problem(with cannot modify code in panel and color picker but modal is fine)? Thank you!