Search code examples
clickpositionabsolute

Click on position absolute not on the element behind

I have a list with cards, and two buttons positionned with absolute.

My card

I have an element with two buttons on, and a JS event on my trash icon.

CSS

.list > .choice {
    position: relative;
    margin: 5px 0;
    padding: 15px;
    cursor: pointer;
    background: rgb(254, 254, 254);
    border-radius: 7px;
    border: 1px solid rgb(229, 229, 229);
    transition: 0.3s;
}
.list > .choice:hover {
    background: rgb(245, 247, 248);
}

.list > .choice > .choice_badge {
    display: inline-block;
    vertical-align: baseline;
    width: 100px;
    height: 25px;
    margin-right: 10px;
    border-radius: 5px;
    border: 1px solid black;
    text-align: center;
}

.list > .choice > .choice_content {
    display: inline-block;
    vertical-align: middle;
}

.list > .choice > .choice_content > .choice_title {
    font-weight: bold;
}
.list > .choice > .choice_content > .choice_sub_title {
    font-size: 1.2rem; 
}
.list > .choice > .choice_options {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%);
    color: rgb(116 117 118);
}
.list > .choice > .choice_options > .material-icons {
    margin-left: 1.2rem;
    color: black;
    font-size: 2rem;
}
.list > .choice > .choice_options > .material-icons > a {
    color: black;
    text-decoration: none;
}

HTML

<div class="list">
    <div class="character choice" user_id="0">
        <div class="choice_content">
            <span class="choice_title">Lorem IPSUM</span>
            <br/>
            <span class="choice_sub_title">Lorem IPSUM</span>
        </div>
        <div class="choice_options">
            <span class="material-icons"><a href="#">create</a></span>
            <span class="material-icons delete">delete</span>
        </div>
    </div>
</div>

JS (jQuery)

$(document).ready(function(){
    $(document).on('click', '.choice', function(){
      alert('clicked on "choice" element');
    });
    
    $(document).on('click', '.delete', function () {
        alert('clicked on delete button');
    });
});

When i click on the trash, a popup open, but because there is the .choice event behind, the popup open and the navigator change page to mylink.

Someone know how to fix that ? Thanks.

Solution

  • I can see that the delete icon button is within the .choice element. Just so you know, a click event affects both element and its children in the sense that if either element or child nodes are clicked, the event would be triggered.. The fix is quite easy though, from my point of view, you don't need two events for this..

    $(document).ready(function(){
    $(document).on('click', '.choice', function(e){
         // check if clicked element is the delete button 
        if($(e.target).hasClass('delete')){
             // code for delete event   
             //--you could provide a method here to make this cleaner
             delete(e.target);
        } else {
             // code for choice element
             choice(e.target);
        }
     });
 });

 function delete(args){
     // code here
 }

    Having separate events for .choice element and its child element(.delete element) is rather unnecessary.. at least that's what I think