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 处理程序被触发。如果要防止以后的处理程序附加到同一元素（此处为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的{{1}}，则不需要#，因为无论如何页面都不会改变。

event.preventDefault（）在单击时不起作用

1 个答案: