在錨標簽內創建按鈕

Question

我正在建立一個零售網站。 在我的產品列表頁面中，我將每個產品作為一個塊列出（每行3個塊）。 在每個區塊內，我想顯示詳細信息，例如名稱，價格，銷售價格等。我還希望在每個區塊內顯示“添加到購物車”按鈕，如果用戶單擊該按鈕，我將使用JS函數添加產品到購物車。 我希望整個塊都可單擊，並在單擊時將用戶帶到產品詳細信息頁面。 我在整個街區周圍都有一個錨標簽。

我的問題是，當用戶單擊“添加到購物車”按鈕時，它通過JS將商品添加到購物車，但隨后觸發了定位標記並將用戶帶到詳細信息頁面。 處理此問題的最佳方法是什么？

我可以將“添加到購物車”按鈕移出模塊，但我不希望這樣做，因為模塊周圍有邊框。

Answer 1

您要阻止單擊事件在按鈕的祖先上觸發，您可能還會說：阻止它沿DOM樹傳播。

這可以通過Event.prototype.stopPropagation實現：

運行代碼段，然后單擊鏈接/按鈕。 請注意，單擊按鈕如何不會觸發錨點上的單擊事件。

 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'); }); 

 <a href="#" data-anchor> <div>Parent content</div> <button type="button" data-button>Button</button> </a> 

Answer 2

感謝兩位對此發表評論的用戶。 盡管答案對我來說略有不同，但在他們的幫助下，我指出了正確的方向，並能夠從中找出答案。 這是我的解決方案：

添加到購物車

//將商品添加到購物車功能addToCart（productId，price）{... addProductToCart（...）; } $（“ span .button”）。click（function（e）{//當用戶單擊return false時，不使錨標記觸發；}）;