Why is the click event not firing?

Question

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 1

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 even t is doing? the mousedown event handler must have done a work that prevents the click from working.

Answer 2

You Can try with this code Hope It's Work

Html code is like this

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

You can use this css

<style>
.main_section {
    position: absolute;
    top: 303px;
    left: 92.5px;
    height: 440px;
    width: 50vw;
    cursor: pointer;
}
.selection{ 
    height: 100%;
    width: 100%;
    background-color: blue;
    z-index:1;
    position: absolute;
}
.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;
    z-index:2;
    position: absolute;
}
</style>

and add this click event

<script>
$(document).ready(function(){
  $(".close-button").click(function(){
    alert("Hello");
  });
  $( ".selection" ).mousedown(function() {
    alert( "Handler for .mousedown() called." );
  });
});
</script>

Answer 3

 function MyClick(){ alert("Close button clicked"); }

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

 <div class="container"> <div class="selection"> <button class="close-button" onClick="MyClick()">✖</button> </div> </div>

Sorry if i am wrong. but as per my understanding on click close button it not fire that is your problem right? so check below code that work fine on click close button.