反应链接OnClick阻止href

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>拦截并停止点击事件的传播，然后它会冒泡到父级<a>（默认情况下会导致浏览器导航到href网址）。

你会发现这个方法仍然保留了当用户用鼠标光标悬停时为用户分配给href的<a>属性的url的可见性：

<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>

为了使这个方法起作用，它假设在<a>的盒子边界（外边界）和内部<span>的盒子边界之间没有填充。 Here's a jsFiddle（非jsx）展示了一般的想法。

希望有所帮助！