event.preventDefault() 在点击时不起作用

Question

我想停止事件点击。

我尝试使用 event.preventDefault() 停止 "ul li a" 上的事件。

<ul>
    <li><a href="#">Click here</a></li>
</ul>

<script type="text/javascript">
$(document).ready(function() {

    $(document).on('click','ul li a', function(event){
        event.preventDefault();
    });
    $(document).on('click','ul li a', function(event){
        alert('Thank you for clicking');
    });
});
</script>

但是当我点击 "ul li a" 时，它应该什么也没有显示，但是却显示 alert('Thank you for clicking')。

Answer 1

事件的默认操作（将您重定向到另一个页面，如果 a 有正确的 href）成功阻止。但是调用 preventDefault 不会阻止触发事件的 other 处理程序。如果你想阻止后面的处理程序在附加到同一元素时运行ning（此处为 document），请使用 stopImmediatePropagation:

$(document).on('click', 'ul li a', function(event) {
  event.preventDefault();
  event.stopImmediatePropagation();
});
$(document).on('click', 'ul li a', function(event) {
  alert('Thank you for clicking');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li><a href="#">Click here</a></li>
</ul>

如果您要阻止的处理程序附加到父元素，请改用 stopPropagation。如果要阻止的处理程序附加到子元素，请使用 stopPropagation 和在捕获阶段具有初始处理程序运行：

ul.addEventListener('click', (e) => {
  if (!e.target.matches('ul li a')) {
    return;
  }
  e.preventDefault();
  e.stopPropagation();
}, true);

$(document).on('click', 'li a', function(event) {
  alert('Thank you for clicking');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="ul">
  <li><a href="#">Click here</a></li>
</ul>

如果 a 总是有 # 的 href，那么就不需要 preventDefault，因为页面无论如何都不会改变。

event.preventDefault() 在点击时不起作用

event.preventDefault() doesn't work in on click

jquery

jquery-events