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

【问题标题】：Why .on('click', 'a' ) do not execute e.stopPropagation(); on the anchor selector?为什么 .on('click', 'a' ) 不执行 e.stopPropagation();在锚选择器上？
【发布时间】：2017-11-07 16:05:05
【问题描述】：

我正在尝试阻止 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>

【问题讨论】：

通过让事件传播到父级来委托事件功能。当它到达父元素时，它已经传播出源元素。
或者，反过来说——如果你有阻止a上的点击事件传播、冒泡——那么你的委托处理程序甚至不会火。

标签： javascript jquery stoppropagation

【解决方案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();});

希望这会有所帮助。

【讨论】：

【解决方案2】：

首先，你不见了

在 2 个脚本结束时，这可能会导致问题。

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

在这里检查这个小提琴 https://jsfiddle.net/3tg96ru1/2/

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

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

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

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

【讨论】：