使用onclick函数忽略防止默认值

Question

在将产品添加到购物车后，我添加了一个自定义的“查看购物车”链接到Woocommerce消息。该链接显示正确的URL，但在单击时不执行任何操作。考虑到情况，我将假设这是由于prevent.default方法，但我不确定。

该链接位于php字符串中，并调用一个包含正确购物车URL的变量：

sprintf( __('Products successfully added to cart! <a href="%s" onclick="cartLink()" title="cart" class="notification-cart-link">View cart</a>','sf-theme'),$cartURL );

这是这样的：

<p id="addToCartMessage"><span class="text-success">Products successfully added to cart! <a href="http://webshop.local/cart/" onclick="cartLink()" title="cart" class="notification-cart-link" id="view-cart">View cart</a></span></p>

我确实找到了一个解决方法，只需创建一个带有购物车页面链接的jQuery函数，然后将其添加为HTML中的onclick，但为此我必须在函数中输入确切的URL，如果链接发生变化，可能会导致问题。

// Add to cart link
function cartLink() {
    var url = 'http://webshop.local/cart/';
    window.location = url;
}

有没有办法忽略或绕过带有onclick函数的prevent.default方法？

Answer 1

只需从被点击的链接中读取URL（触发事件的元素在监听器中以e.target的形式提供）：

var link = document.getElementById('view-cart');

// let's assume some Javascript has added a listener which does preventDefault()
// so now clicking it does nothing (the following 3 lines simulate that)
link.addEventListener('click', (e) => {
  e.preventDefault()
})

// now let's console.log the href of the link on click
link.addEventListener('click', function(e) {
  console.log(e.target.href);
  // you wanna do this here:
  // window.location.href = e.target.href
})

<p id="addToCartMessage"><span class="text-success">Products successfully added to cart! <a href="http://webshop.local/cart/" title="cart" class="notification-cart-link" id="view-cart">View cart</a></span></p>

如果有任何不清楚的地方，请随时在评论中提问。