CODEWITHSUNDEEP
htmlreactjspreventdefault
Velatha
Velatha

Reputation: 29

React link OnClick prevent href

I have a link with a href and onClick function.

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

I want the href link the be there so users can see the url when hovering, but I want only the onclick to be executed. I have tried

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

But none of those seem to work.

Upvotes: 1

Views: 2010

Answers (2)

Surendra
Surendra

Reputation: 1

  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>

Upvotes: 0

Dacre Denny
Dacre Denny

Reputation: 30360

One solution would be to add a new "internal element" such as a <span> inside of the <a> element, and bind the onClick event handler with event.stopPropagation() to that internal element.

This would cause the <span> to intercept and stop the propagation of the click event before it bubbles up to the parent <a> (which would by default cause the browser to navigate to the href url).

You should find this method still preserves visibility of the url assigned to the href attribute of <a> for the user when it is hovered with the mouse cursor:

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

For this method to work, it assumed that there is no padding between the box border (outer boundary) of the <a> and the box border of the inner <span>. Here's a jsFiddle (non-jsx) demonstrating the general idea.

Hope that helps!

Upvotes: 1

Related Questions