Click function only when user isn't hovering on another class

Question

I have the following structure:

The whole rectangle is .msg_box and the little red X is .msg_del_x

The HTMl of that is (there are multiple of these boxes, all with the same class):

<div class="msg_box" msg_id="4">
    <span style="font-size: 16px">Administartor</span><span class="msg_del_x" del_id="4" style="float: right; font-size: 20px; font-weight: bold; line-height: 0.6;">x</span><br>
    <span style="font-size: 14px">d</span><span style="float: right; font-size: 11px; color: #444;">05.09.15</span>
</div>

This is the JS (without the red X)

$(".msg_box").click(function(){
    var msg_id = $(this).attr("msg_id");
    $(".msg_box").css("background-color", "#FFF");
    $(this).css("background-color", "#EEE");
    $("#msg_display").load("select.php?msg_id="+msg_id);
    $("#msg_display").css("background-color", "#EEE");
})

This is my current JS for the red X .msg_del_x

$(".msg_del_x").click(function(){
    //AJAX
});

The Problem

The problem is that if I click on any .msg_del_x the .msg_box is also clicked which starts the first JS I posted. And I don't want that.

If I click on the red X (.msg_del_x), the click-event of .msg_box shouldn't start.

I thought this could be made with hover-checks but this didn't worked for me too.

rrk · Accepted Answer · 2015-09-05 17:28:07Z

1

Try this. The function event.stopPropagation() prevents the click on a child element getting bubbled to any parent elements.

$(".msg_del_x").click(function(event){
    event.stopPropagation();
});

answered Sep 5, 2015 at 17:28

rrk

15.9k4 gold badges32 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Click function only when user isn't hovering on another class

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related