點擊功能，只有當用戶未懸停在另一個類

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電流JS .msg_del_x

$(".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(); 
});