Question

我正在建立一个零售网站。在我的产品列表页面中，我将每个产品列为一个块（每行3个块）。在每个区块内，我想显示名称，价格，促销价等详细信息。我还想在每个区块内部添加“添加到购物车”按钮，如果用户点击它，我将使用JS功能添加产品到购物车。我希望整个块可以单击，并在单击时将用户带到产品详细信息页面。我在整个区块周围都有一个锚标记。

我的问题是，当用户点击添加到购物车按钮时，它会通过JS将项目添加到购物车，但随后锚点标记将触发并将用户带到详细信息页面。处理这个问题的最佳方法是什么？

我可以将“添加到购物车”按钮移出块，但我不愿意，因为块周围有边框。

Answer 1

您希望阻止点击事件在按钮的祖先上触发，您可能还会说：阻止它在DOM树上传播。

这可以通过@listing = Listing.find_by(adress: params[:address], booking_id: params[:booking_id]) @listings = Listing.last(3)：

来实现

运行代码段，然后单击链接/按钮。请注意，单击按钮不会触发锚点上的单击事件。

＆＃13;

Event.prototype.stopPropagation

＆＃13;

var anchor = document.querySelector('[data-anchor]');
var button = document.querySelector('[data-button]');

anchor.addEventListener('click', function(e) {
  console.log('anchor clicked');
});

button.addEventListener('click', function(e) {
  e.stopPropagation();
  console.log('button clicked');
});

＆＃13;

Answer 2

感谢两位评论的用户。虽然答案对我来说略有不同，但在他们的帮助下，我指出了正确的方向并且能够从那里弄明白。这是我的解决方案：

加入购物车

//将商品添加到购物车 function addToCart（productId，price）{ ... addProductToCart（...）; } $（＆＃34; span .button＆＃34;）。click（function（e）{ //当用户点击时，不要触发锚标记返回false; }）;

在锚标记内创建按钮

2 个答案: