Prevent a link to reload page

Question

I am creating a responsive menu: Codepen Demo

To avoid the page to be reloaded when I click a link I have:

$('nav.menu a[href="#"]').click(function () {
  $(this).preventDefault();
});

But this does not seem to work. When I click a button the menu disappears.

Does anyone knows what I am be doing wrong?

possible duplicate of [preventDefault() on an tag](http://stackoverflow.com/questions/265478/preventdefault-on-an-a-tag) — Evan Davis, Sep 02 '13 at 14:41
See this answer: https://stackoverflow.com/questions/265478/preventdefault-on-an-a-tag/10478514#10478514 — Musaddiq Khan, May 19 '18 at 12:06

Sergio · Accepted Answer · 2014-07-23T17:56:42.367

31

It's not the element that need a .preventDefault(), its the click event.

Try this:

$('nav.menu a').click(function (event) {
  event.preventDefault();
  // or use return false;
});

I don't recommend to use the href as selector though, better to give it an id or name.

From MDN, about .preventDefault():
Cancels the event if it is cancelable, without stopping further propagation of the event.

You can read more here:

MDN: event.preventDefault()
jQuery: Selectors

There is a CSS way, using pointer-events.

So by using in the CSS pointer-events: none; all click will be ignored. This is a "recent" alternative and suported in IE11+, Firefox 3.6+, Chrome 2.0+, Safari 4+.

Example

edited Jul 23 '14 at 17:56

answered Sep 02 '13 at 14:37

Sergio

28,539
11
85
132

1

This is the solution actually. – Sarvap Praharanayuthan Sep 02 '13 at 14:43
I tried your suggestion but, in my example, it does not work. And I would like to use it only in the links with href=#" which are the ones that have a child menu ... Try to check my CodePen example ... – Miguel Moura Sep 02 '13 at 15:03
@Shapper, just checked the console on your pen. It is not loading jQuery, that is why. Check here: http://jsfiddle.net/A8apu – Sergio Sep 02 '13 at 15:39

score 7 · Answer 2 · answered Mar 14 '18 at 06:41

7

Here is very easy way to do it inside html.

<a class="font-weight-bold" href="javascript:void(0);"> Click Here </a>

answered Mar 14 '18 at 06:41

Muhammad Ahsan

608
15
28

score 5 · Answer 3 · answered Sep 02 '13 at 14:37

5

Just return false.

$('nav.menu a[href="#"]').click(function () {
  return false
});

answered Sep 02 '13 at 14:37

slinky2000

2,663
1
15
12

I like return false too. – lharby Sep 02 '13 at 14:37
I tried your suggestion but, in my example, it does not work. Try to check my CodePen example ... – Miguel Moura Sep 02 '13 at 15:03
1

@Shapper I have never used codepen, but it looks like the jquery library has not been included. You need to link to it in the code. "$ is not defined" is being returned. – lharby Sep 02 '13 at 15:13

score 2 · Answer 4 · answered Sep 02 '13 at 14:37

2

Use like that:

$('nav.menu a[href="#"]').click(function (event) {
  event.preventDefault();
});

answered Sep 02 '13 at 14:37

Murat Çorlu

8,207
5
53
78

I tried your suggestion but, in my example, it does not work. Try to check my CodePen example ... – Miguel Moura Sep 02 '13 at 15:05

lharby · Answer 5 · 2017-06-07T07:59:10.767

0

Try this:

$('.menu a').click(function(e){
   e.preventDefault(); // stop the normal href from reloading the page.
});

Working codepen example: http://codepen.io/anon/pen/cynEg

You did not have a reference to the jquery library included. Also the 'enquire' function is now throwing an error but preventDefault is working.

Edit I have commented out the second function.

edited Jun 07 '17 at 07:59

answered Sep 02 '13 at 15:17

lharby

3,057
5
24
56

Don't just link to codepen, if your link ever breaks your answer is useless. – Matthew Hinea Jun 07 '17 at 00:02
1

@MatthewHinea sorry, I wrote that when I was a real newb. Updated now. – lharby Jun 07 '17 at 08:00

score 0 · Answer 6 · answered Sep 01 '14 at 12:27

0

$('nav.menu a[href="#"]').click(function (e) {
   e.preventDefault();
});

answered Sep 01 '14 at 12:27

kazimt9

563
5
11

score 0 · Answer 7 · answered Dec 03 '17 at 23:00

0

And an inline option without jQuery:

<a href="javascript:function f(e){e.preventDefault();}">Link</a>

And don't forget that with this you have already used the "f" name for a function, so don't name other function like this.

answered Dec 03 '17 at 23:00

adkl

634
7
17

Prevent a link to reload page

7 Answers7

There is a CSS way, using pointer-events.

Example

Linked

Related