preventDefault() like functionality in javascript

Question

I have already gone through this question

But didn't find my solution. Actually i am using javascript function to go back to previous page that is working fine on click of

<a href="#" onclick="goBack()"><img src="images/backbtn.png"></a>

function

function goBack(){
    window.history.back();
}

When i click on <a> it includes # in url which i want to prevent. In jquery we use preventDefault() to stop the default event of an element but is there any similar function in javascript to stop it.

I know i can use javascript:void(0) in href which will solve the problem but there can be many other instances so i want to know about function in javascript.

I tried using return false; but it i write this on top like this

function goBack(){
    return false;
    window.history.back();
}

Then it stops the function to execute and if i write like this

function goBack(){
    window.history.back();
    return false;
}

Then no effect from this return false;. I am sure there is some in javascript as jquery is generated from javascript.

Any help would be appreciated. Thanks in advance!

why do you want to stop the `window.history.back();` on what instance? — guradio, Apr 26 '16 at 07:25
what are you trying to prevent?? You question is not clear.. The part you have put on question is ok .. But when do you want to prevent the event? and when not to?? how is the event generated? — Rajshekar Reddy, Apr 26 '16 at 07:27
there can be many reasons. But here i want because i am using this function on click of `` tag which is having attribute `href="#"` and i dont want to display `#` in url on its click. I know i can use `javascript:void(0)` here but i want to use function like `preventDefault()` because as i said there can be many instances. — Gaurav Aggarwal, Apr 26 '16 at 07:27
as far as I know `Event.preventDefault()` is a native javascript function — RRR, Apr 26 '16 at 07:39

score 4 · Accepted Answer · answered Apr 26 '16 at 07:37

4

As far as I know, preventDefault() also is a native JS function, so you can use it without jQuery and get same result.

You can read more about it here: MDN: Event.preventDefault()

answered Apr 26 '16 at 07:37

Maxim Mazurok

3,856
2
22
37

Rajshekar Reddy · Answer 2 · 2016-04-26T07:43:59.610

2

event.preventDefault() works both in Javasccript and Jquery

If getting the # is the problem and for some reason you really want to use only preventDefault() then you must pass the event into the function and then inside the function use event.preventDefault()

<a href="#" onclick="goBack(event)"><img src="images/backbtn.png"></a>

Then in your Javascript use this passed event and stop the default behaviour.

function goBack(event){
  event.preventDefault();
  window.history.back();
}

edited Apr 26 '16 at 07:43

answered Apr 26 '16 at 07:40

Rajshekar Reddy

18,647
3
40
59

`window.history.back()` should not be necessary here. Gaurav only uses it to remove the `#` from the location, but with `preventDefault`, `#` won't be added. – szym Apr 26 '16 at 07:40
@szym I belive the problem is he is able to go back to previous page but still he gets a `#` in the previous page url.. – Rajshekar Reddy Apr 26 '16 at 07:41

score 1 · Answer 3 · answered Apr 26 '16 at 07:55

To add to the answers, return false in jquery does both event.preventDefault and event.stopPropagation()

From jquery source code, jquery.event.dispatch

if ( ret !== undefined ) {
   if ( (event.result = ret) === false ) {
     event.preventDefault();
     event.stopPropagation();
   }
}

Both preventDefault and stopPropagation are available in Javascript.

For IE < 9, event.stopPropagation can be done by event.cancelBubble = true and event.preventDefault can be done by event.returnValue = false

gaetanoM · Answer 4 · 2016-04-26T08:07:17.920

preventDefault exists in javascript, but if you are interested in a jQuery like solution you need to take care of compatibility issues. A different solution, considering the compatibility issues with old browsers, is:

function goBack(evt){
  var e = evt || window.event;
  if (e !== undefined) {
     if (e.preventDefault) {
       e.preventDefault();
     } else {  // IE
       e.returnValue = false;
     }
  }
  window.history.back();
}

<a href="#" onclick="goBack(event)"><img src="images/backbtn.png"></a>

preventDefault() like functionality in javascript

4 Answers4