jQuery Click Div On Div,除了Child Div

Question

我有以下HTML:

<div class="server" id="32">
  <a>Server Name</a>
  <div class="delete-server">X</div>
</div>

我试图这样做,当用户单击它时,server它会打开一个编辑对话框.问题只是做:

 $(".server").click(function () {
     //Show edit dialog
 });

不起作用,因为如果他们点击删除的X,它会打开编辑对话框.如何使整个div server具有除delete-serverdiv 之外的click事件.

Answer 1

$(".server").on('click', ':not(.delete-server)', function (e) {
     e.stopPropagation()
     // Show edit dialog
});

这是小提琴:http://jsfiddle.net/9bzmz/3/

Answer 2

只需检查触发事件的元素是什么:

$(".server").click(function(e) {
    if (!$(e.target).hasClass('delete-server')) {
        alert('Show dialog!');
    }
});?

现场演示

Answer 3

有另一种方法可以解决这个问题:

$(".server").click(function () {
    // show edit dialog
});
$(".delete-server").click(function (event) {
    // show delete dialog for $(this).closest(".server")
    event.stopPropagation();
});

只需确保发出的click事件.delete-server不会冒泡到父元素.