为什么 .on('click', 'a' ) 不执行 e.stopPropagation();在锚选择器上？

Question

我正在尝试停止传播 div 中所有锚点的事件，该事件附加了点击事件，但只有 .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>

Answer 1

您应该阻止默认操作而不是使用 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();});

希望对您有所帮助。

Answer 2

首先，你不见了

)

在 2 个脚本的末尾，这可能会导致问题。

其次，如果这只是错字，这两个代码应该有相同的结果，事件仅在单击 div 时触发，而在单击锚点时不触发。

在此处检查 fiddle https://jsfiddle.net/3tg96ru1/2/

第三，更好的方法是在同一个函数中执行此操作并检查单击的元素是否不是锚点，然后像这样执行函数：

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

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

有关 .on('click') 与 .click() 之间区别的更多详细信息 检查此 link： Difference between .on('click') vs .click()