Question

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

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

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>

如果仍然不清楚，请随时在评论中提问。

使用onclick函数忽略默认值

1 个答案: