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

Question

我正在尝试停止传播附加了点击事件的 div 中所有 anchor 的事件，但只有 .click jquery 函数触发 e.stopPropagation() ;，.on('click', 'a', function()); 不要。

有效的代码示例，单击 anchor 时不会触发 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>

无效的代码示例，点击 anchor 会同时触发点击、 anchor 本身和 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();});

希望这对您有所帮助。