Avoid button click effect without affecting other links

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 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 pages to work normally. I just want to affect the behavior of everyone <a href="#"></a>.

Answer 1

In place of # you can put:

<a href="javascript: void(0)"> Link 2 </a>

Or put a class in 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 of the element. Click, Hover, Focus, Etc.