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时触发事件，并且在单击锚点时不会触发。

在这里查看这个小提琴 details here

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

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

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

有关.on（＆＃39;点击＆＃39;）与.click（）之间差异的详细信息检查此链接： https://jsfiddle.net/3tg96ru1/2/

为什么.on（'click'，'a'）不执行e.stopPropagation（）;锚选择器？

2 个答案: