Question

我有一个带有href和onClick函数的链接。

<a href={menuItem.url}  onClick={e => {
 var checkedItems = document.querySelectorAll("input:checked") as NodeListOf<HTMLInputElement>;
      for (let i = 0; checkedItems[i]; i++) {
        checkedItems[i].checked = false;
      }
 window.location.href = menuItem.url;  }}>

我希望在那里有href链接，以便用户在悬停时可以看到url，但是我只希望执行onclick。我尝试过

e.stopPropagation();
e.preventDefault();
e.nativeEvent.stopImmediatePropagation();
return false;

但是这些似乎都不起作用。

Answer 1

一种解决方案是在<span>元素内部添加一个新的“内部元素”，例如<a>，并将onClick事件处理程序与event.stopPropagation()绑定到该内部元素。

这将导致<span>拦截并停止click事件的传播，然后再传播到父<a>（默认情况下，这将导致浏览器导航到{{1} }网址。

当使用鼠标悬停该方法时，应该为用户保留分配给href的{{1}}属性的URL的可见性：

href

要使此方法起作用，假定<a>的框边界（外部边界）和内部<a href={menuItem.url}> <span onClick={e => { // Intercepts and prevents the event from propagating up to the parent <a> e.stopPropagation(); // Your existing logic for the onClick event var checkedItems = document.querySelectorAll("input:checked") as NodeListOf<HTMLInputElement>; for (let i = 0; checkedItems[i]; i++) { checkedItems[i].checked = false; } window.location.href = menuItem.url; }}> The text label for your link </span> </a>的框边界之间没有填充。 Here's a jsFiddle（非jsx）展示了总体思路。

希望有帮助！

反应链接OnClick防止href

1 个答案: