html React link OnClick防止href

e0bqpujr  于 11个月前  发布在  React
关注(0)|答案(2)|浏览(182)

我有一个链接与一个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;


但似乎都不管用。

vltsax25

vltsax251#

一种解决方案是在<a>元素中添加一个新的“内部元素”,例如<span>,并将event.stopPropagation()onClick事件处理程序绑定到该内部元素。
这将导致<span>拦截并停止点击事件的传播,然后再将其冒泡到父<a>(默认情况下,这将导致浏览器导航到href url)。
您应该会发现,当鼠标悬停在<a>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)的框边界之间没有填充,这说明了一般的想法。
希望能帮上忙!

bnl4lu3b

bnl4lu3b2#

Used This Code for prevent href 
=========================================
const [showSelect, setShowSelect] = useState(false)
 const toggle = () => setShowSelect(!showSelect)

<div className="card">
          <header className="card-header">
            <p className="card-header-title">
              Card title
            </p>
            <a onClick={() => toggle()} data-action="collapse" className="card-header-icon is-hidden-fullscreen" aria-label="more options">
              <span className="icon">
                <i className="fas fa-angle-down" aria-hidden="true"></i>
              </span>
            </a>
          </header>
          {showSelect && (
            <div className="is-collapsible is-active">
              <div className="card-content">
                <p className="title is-4">
                  “There are two hard things in computer science: cache invalidation, naming things, and off-by-one
                  errors.”
                </p>
                <p className="subtitle is-5">
                  Jeff Atwood
                </p>
              </div>
            </div>
          )}

        </div>

字符串

相关问题