Question:
As I can in jQuery, avoid the click effect of a link that has href="#" without affecting the default behavior of other links.
Example:
I have 3 links
<a href="#">Link 1</a>
<a href="http://www.meusite.com.br/">Link 2</a>
<a href="#">Link 3</a>
What I'm trying to do is that when the user clicks on the link with href = #, it doesn't have that effect of going to the top of the page. And at the same time, I want other links on the page to function normally. I just want to affect the behavior of all <a href="#"></a> .
Answer:
In place of the # you can put:
<a href="javascript: void(0)"> Link 2 </a>
Or put a class on it:
<a href="#" class="none-link"> Link 2 </a>
CSS
a.none-link{
pointer-events: none;
}
pointer-events: none – This property with this value discards all events for the element. Click, Hover, Focus, Etc.