Why is the click event not firing?

I have a button inside of an absolute position div; It has a click handler but it’s not firing. I also have a mousedown event on the absolute positioned div. When I remove the mousedown handler from the parent div, the click handler will work correctly.

Here is the markup and CSS:

<div class="container">
    <div class="selection">
        <button class="close-button">✖</button>
    </div>
</div>

.selection {
    position: absolute;
    top: 303px;
    left: 92.5px;
    height: 440px;
    width: 50vw;
    background-color: blue;
    cursor: pointer;
}

.close-button {
    height: 22px;
    vertical-align: top;
    border: 0;
    background-color: transparent;
    color: white;
    font-size: 18pt;
    line-height: 20px;
    user-select: none;
    cursor: pointer;
}

The button is rendered on top of the absolute div

Why are these events conflicting and how can I fix this?

— EDIT —

I have confirmed that the event handlers actually do exist on the DOM as I expect them to. I can fire them manually from the console. I did not include the event handlers in my example as it was written in React.

Answer

Please note that mousedown differs from the click event which is fired after a full click action occurs; that is, the mouse button is pressed and released while the pointer remains inside the same element. mousedown is fired the moment the button is initially pressed.

What the mousedown event is doing ? the mousedown event handler must have done a work that prevents the click from working.