Как определить, была ли нажата ссылка на определенный класс внутри DIV, и переопределить действие нажатия DIV?

Question

Как определить, была ли нажата ссылка на определенный класс внутри DIV, и переопределить действие нажатия DIV?

0

На моей странице есть несколько DIV следующего вида:

<div class='entry'>
    This is a statement 
    <a title="Search @travel" class="app-context-link" href="">@travel</a>
</div>

Когда щелкнут DIV класса.entry, я вызываю следующее:

$(".entry").on('click', function(e) {
   console.log("DIV Clicked");
});

Когда щелкнута ссылка класса.app-context-link, я вызываю следующее:

var context_links = document.getElementsByClassName('app-context-link');

for (var k=0;k<context_links.length;++k) {
    context_links[k].addEventListener('click', function(e) {
        console.log("The context link inside DIV is clicked");
    });
}

Вопрос:

Прямо сейчас, когда я нажимаю на ссылку app-context-link, срабатывают оба действия: для DIV (потому что событие.click обнаружено) и для ссылки (потому что там есть прослушиватель событий по ссылке этого класса).

Как сделать так, чтобы при щелчке ссылки DIV на клике jQuery не запускался?

Я попробовал несколько возможностей, ничего не получилось. Кроме того, я бы предпочел не переустанавливать код слишком много, а просто добавить некоторую директиву в части jQuery на клике, чтобы он обнаружил, была ли нажата ссылка и не делает то, что она обычно делала бы, если бы щелкнул DIV.

Спасибо!

Dmitry Paranyushkin 05 март 2014, в 15:38

Источник

0

Поскольку вы используете jQuery, почему вы не используете его и для обработчиков событий ссылки? просто используйте $ ('. entry'). on ('click', '.app-context-link', function (e) {...}); Это добавит обработчик делегата к вашему .entry , который будет обрабатывать щелчки для всех .app-context-link в div, вместо добавления 1 обработчика для каждой ссылки.
Dogoku 05 март 2014, в 14:27

Теги:

javascript

jquery

html

onclick

2 ответа

3

вы можете так использовать

$(".entry").on('click', function(e) {
e.stopPropagation();
alert($(this).prop("tagName"));
});
$(".entry a").on('click', function(e) {
e.preventDefault();
 e.stopPropagation();
alert($(this).prop("tagName"));
});

DEMO

Anoop Joshi 05 март 2014, в 12:08

Ещё вопросы

Поскольку вы используете jQuery, почему вы не используете его и для обработчиков событий ссылки? просто используйте $ ('. entry'). on ('click', '.app-context-link', function (e) {...}); Это добавит обработчик делегата к вашему .entry , который будет обрабатывать щелчки для всех .app-context-link в div, вместо добавления 1 обработчика для каждой ссылки.

Karl-André Gagnon · Accepted Answer · 2014-03-05T12-34-00.000Z

Использование распространения остановки:

context_links[k].addEventListener('click', function(e) {
    e.stopPropagation(); //Here
    console.log("The context link inside DIV is clicked");
});

Это остановит событие щелчка от пузырьков, поэтому, когда вы нажмете на a, события щелчка его предка не будут срабатывать.