Our <a> tag opens a custom pdf viewer in our application by providing a function to the onClick property.
We want to provide a href for accessibility, so users can rightclick -> open in new tab, control+click or what else they fancy.
However, when the user clicks the <a> tag, we don't want to actually open the link, instead our onClick function should handle the event.
currently we have somthing like this:
render(){
return (<a href="www.stackoverflow" onClick={(e)=>this.linkClick(e)} >click here</a>)
}
linkClick(e) {
e.stopPropagation(); // does not stop the link from opening
console.log("link clicked");
return false; // does not stop the link from opening
}
In plain js this can be done by returning false on the onClick function.
We've also tried adding stopPropagation() to no avail.
Some react users add href="javascript: void(0)" while this does disable the link, it does not meet our accessibility needs.
Our <a> tag opens a custom pdf viewer in our application by providing a function to the onClick property.
We want to provide a href for accessibility, so users can rightclick -> open in new tab, control+click or what else they fancy.
However, when the user clicks the <a> tag, we don't want to actually open the link, instead our onClick function should handle the event.
currently we have somthing like this:
render(){
return (<a href="www.stackoverflow." onClick={(e)=>this.linkClick(e)} >click here</a>)
}
linkClick(e) {
e.stopPropagation(); // does not stop the link from opening
console.log("link clicked");
return false; // does not stop the link from opening
}
In plain js this can be done by returning false on the onClick function.
We've also tried adding stopPropagation() to no avail.
Some react users add href="javascript: void(0)" while this does disable the link, it does not meet our accessibility needs.
javascript
reactjs
Share
Improve this question
edited May 23, 2017 at 12:25
CommunityBot111 silver badge
asked Jan 19, 2017 at 9:54
LarsLars3,62811 gold badge2020 silver badges3333 bronze badges
Add a ment
|
1 Answer
1
Reset to default
10
Use preventDefault. Returning false has been deprecated since React 0.12.