I want to disable my hyperlink on some certain condition. do not want to use pointer events as it does not support ie8.
Asked
Active
Viewed 28 times
0
-
What kind of conditions? – tomrlh Jan 31 '18 at 00:41
-
tried with pointer events that works fine but doesn't support ie I need some css with my render logic condition – Partha Mukherjee Jan 31 '18 at 00:43
2 Answers
1
You can use Event.preventDefault(). You'll want to add an event listener for the element that passes through the click event of the hyperlink itself:
document.getElementById("link").addEventListener("click", function(event) {
event.preventDefault();
// Run any additional functionality
console.log('Event prevented');
});<a id="link" href="http://www.google.com">Google</a>
Obsidian Age
- 41,205
- 10
- 48
- 71
-
looking for css solution. thanks for this as well . I know we can use prevent default or pointer events – Partha Mukherjee Jan 31 '18 at 00:44
-
If you're looking for a CSS-only solution, your question would be an exact duplicate of [**this one**](https://stackoverflow.com/questions/2091168/how-to-disable-a-link-using-only-css) (which states that you should use `pointer-events`). IE8 stopped being supported by Microsoft years ago, and I have no idea why ~1% of people still use it. Simply support every browser apart from IE8, and possibly display a message telling those running IE8 to get a better browser. – Obsidian Age Jan 31 '18 at 00:48
0
You can add the disabled attribute to the anchor tag and toggle it true/false using javascript with element.setAttribute
Jared
- 100
- 8