Почему .on('click', 'a' ) не выполняет e.stopPropagation(); на селекторе якоря?

Я пытаюсь остановить распространение события всех якорей в div, к которому прикреплено событие click, но только функция .click jquery срабатывает e.stopPropagation();, а .on('click', 'a', function()); - нет.

Пример кода, который работает, щелчок по якорю не вызывает щелчок по div при нажатии

<div class="clickedDiv" data-url="http://myurl.com">
  <a class="clickedA">my link</a>
</div>

<script>
  $('.clickedA').click(function(e) {e.stopPropagation();});
  $('.clickedDiv').click(function(e) {
    var url = $(this).data('url');
    window.location.href = url;
  });
</script>

Пример кода, который не работает, щелчок по якорю вызывает оба щелчка, сам якорь и div

<div class="clickedDiv" data-url="http://myurl.com">
  <a class="clickedA">my link</a>
</div>

<script>
  $('.clickedDiv').on('click', 'a', function(e) {e.stopPropagation();});
  $('.clickedDiv').click(function(e) {
    var url = $(this).data('url');
    window.location.href = url;
  });
</script>

javascript jquery stoppropagation
person Giovanni Bastianelli    schedule 07.11.2017    source источник
comment
Делегируйте функции событий, позволяя событию распространяться до родителя. К тому времени, когда он достигает родительского элемента, он уже распространился из исходного элемента.   -  person Taplar    schedule 07.11.2017
comment
Или, наоборот, если бы вы были остановили распространение события click на a, то ваш делегированный обработчик даже не сработал бы.   -  person CBroe    schedule 07.11.2017

Ответы (2)


arrow_upward
1
arrow_downward

Во-первых, тебя не хватает

)

в конце 2 сценариев это может вызвать проблему.

Во-вторых, если это просто опечатка, оба кода должны иметь одинаковые результаты, событие срабатывает только при нажатии на div и не срабатывает при нажатии на привязку.

проверьте эту скрипту здесь https://jsfiddle.net/3tg96ru1/2/

В-третьих, лучший способ сделать это — сделать это в той же функции и проверить, не является ли щелкнутый элемент якорем, а затем выполнить функцию следующим образом:

    $('.clickedDiv3').click(function(e) {

    var target = e.target;
if (!$(target).is('.clickedA3')) {
        alert('fffff');
    } });

для получения более подробной информации о разнице между .on('click') и .click() проверьте эту ссылку: Разница между .on('click') и .click()

person Mostafa Yousef    schedule 07.11.2017

arrow_upward
4
arrow_downward

Вы должны предотвратить действие по умолчанию вместо использования e.preventDefault(), должно быть:

$('.clickedDiv').click(function(e) {
    e.preventDefault();

    var url = $(this).data('url');
    window.location.href = url;
}

ПРИМЕЧАНИЕ. Нет необходимости в другом событии клика:

$('.clickedDiv').on('click', 'a', function(e) {e.stopPropagation();});

Надеюсь это поможет.

person Zakaria Acharki    schedule 07.11.2017