JQuery click event on parent, но поиск элемента child (clicked)

скажем, у меня есть родительский элемент, у которого так много вложенных дочерних элементов внутри себя:

<div id="p">
    <div id="c1">
        <div id="c2"></div>
        <div id="c3"></div>
    </div id="c4">
        <div id="c5"></div>
    </div>
</div>

Я уже привязал событие click к родительскому объекту:

$('#p').bind('click', function() {
    alert($(this).attr('id'));
});

Поскольку событие назначено родительскому элементу, я всегда вижу родительский идентификатор, однако мне интересно, есть ли какой-либо способ узнать, какой из этих дочерних элементов был нажат?

Я также не могу назначить какое-либо событие дочерним элементам или удалить прослушиватель событий из родительского div.

Ответы

Ответ 1

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

Live Demo

 $('#p').bind('click', function(event) {
    alert(event.target.id);
 });

или

Live Demo

$('#p').bind('click', function(event) {
    alert($(event.target).attr('id'));
});

Edit

Первый метод event.target.id предпочтительнее второго $(event.target).attr('id') для производительности, простоты и удобочитаемости.

Ответ 2

Вы можете попробовать приведенный ниже код. Также попробуйте jsfiddle тоже (demo).

$('#p').on('click', function(event) {
    alert(event.target.id);
});

Попробуйте демонстрацию

Ответ на второй вопрос: вы можете назначить событие дочернему элементу и удалить из него родительский. Проверьте это.

.stopPropagation();

Предотвращает появление пузырьков в дереве DOM, предотвращая родительских обработчиков от уведомления о событии. Подробнее

если вы хотите, чтобы конкретное событие выполнялось только и не разрешалось запускать другое событие, вы используете код ниже

event.stopImmediatePropagation()

Предотвращает выполнение остальных обработчиков и предотвращает появление пузырьков в дереве DOM. Подробнее

Я надеюсь, что это решит вашу проблему. Если у вас есть какие-либо вопросы, пожалуйста, не стесняйтесь спрашивать. Благодаря

Ответ 3

Если у ваших элементов есть внуки, есть лучший способ получить только ребенка. Заметьте, что больше знака.

$('.parent > .child').click(function() {
    // This will be the child even if grandchild is clicked
    console.log($(this));
});