如何使用 jQuery 停止默认链接点击行为答案

【问题标题】：How to stop default link click behavior with jQuery如何使用 jQuery 停止默认链接点击行为
【发布时间】：2023-03-31 18:32:01
【问题描述】：

我在网页上有一个链接。当用户单击它时，页面上的小部件应更新。但是，我正在做一些事情，因为默认功能（导航到不同的页面）发生在事件触发之前。

这是链接的样子：

<a href="store/cart/" class="update-cart">Update Cart</a>

这是 jQuery 的样子：

$('.update-cart').click(function(e) { 
  e.stopPropagation(); 
  updateCartWidget(); 
});

有什么问题？

【问题讨论】：

jQuery disable a link的可能重复

标签： javascript jquery events click jquery-events

【解决方案1】：

e.preventDefault();

来自https://developer.mozilla.org/en-US/docs/Web/API/event.preventDefault

如果可以取消，则取消该事件，不停止进一步传播事件。

【讨论】：

谢谢，我把stopPropagation 和preventDefault 搞糊涂了

【解决方案2】：

$('.update-cart').click(function(e) {
    updateCartWidget();
    e.stopPropagation();
    e.preventDefault();
});

$('.update-cart').click(function() {
    updateCartWidget();
    return false;
});

以下方法实现完全相同的目标。

【讨论】：

为什么我需要打电话给stopPropagation()和preventDefault()？
看看 Jonathons 的回答，他解释了每个函数的作用。但基本上，要确保您刚刚处理的点击以后不会被其他人处理。

【解决方案3】：

您希望e.preventDefault() 防止出现默认功能。

或者你的方法中有return false。

preventDefault 阻止默认功能，stopPropagation 阻止事件冒泡到容器元素。

【讨论】：

【解决方案4】：

您可以使用e.preventDefault(); 代替e.stopPropagation();

【讨论】：

【解决方案5】：

此代码删除所有事件侦听器

var old_element=document.getElementsByClassName(".update-cart");    
var new_element = old_element.cloneNode(true);
old_element.parentNode.replaceChild(new_element, old_element);

【讨论】：

【解决方案6】：

我刚刚在这上面浪费了一个小时。我尝试了一切——结果证明（我简直不敢相信）给我的取消按钮和取消元素 id 意味着任何阻止事件传播的尝试都会失败！我猜 HTML 页面必须将其视为有人按 ESC 键？

【讨论】：