仅当用户没有悬停在另一个班级上时，单击功能

Question

我有以下结构：

整个矩形为.msg_box，小红色X为.msg_del_x

HTMl就是（这些方框中有多个，都是同一个类）：

<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>

这是JS（没有红色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");
})

这是我目前的红色X .msg_del_x

的JS

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

问题

问题在于，如果我点击任何.msg_del_x，也会点击.msg_box，这会启动我发布的第一个JS。我不想要那个。

如果我点击红色X（.msg_del_x），则.msg_box的点击事件不应该开始。

我认为这可以通过悬停检查进行，但这对我也没有用。

Answer 1

试试这个。函数 event.stopPropagation() 可防止点击子元素冒泡到任何父元素。

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