Как проверить наличие клика в родительском элементе, но не в дочернем?

Question

Код:

HTML

<!-- snip -->
<div class="parent" id="parent">
    <div class="child" id="child">
    </div>
</div>
<!-- snip -->

Javascript

/* snip */
$(function () {
    $("#parent").click(function () {
        alert("This dialog should only show up if the parent is clicked.");
    });
});
/* snip */

(Это просто базовая структура фактического кода ... некоторые вещи отличаютсяфактический код, например, дочерний элемент является перетаскиваемым элементом jQuery UI)

Answer 1

События JavaScript / DOM работают так, что они «всплывают» от детей к родителям.Поэтому вам просто нужно остановить это на дочернем элементе:

$('#child').click(function(event) {
    event.stopPropagation();
});

См. Документацию jQuery для .click() для получения дополнительной информации.В качестве альтернативы вы можете проверить, что является исходным элементом в обработчике событий родителя , используя event.target.

Answer 2

Ну, я бы сделал что-то вроде этого:

$("#child").click(function() { });

Хотя это кажется немного уродливым, я думаю, что оно гарантированно сработает.