CODEWITHSUNDEEP
javascriptjqueryfunctionpreventdefault
Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10177

preventDefault() like functionality in javascript

I have already gone through this question

event.preventDefault() vs. return false

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!

Upvotes: 0

Views: 1897

Answers (4)

gaetanoM
gaetanoM

Reputation: 42044

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>

Upvotes: 0

Sami
Sami

Reputation: 4006

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

Upvotes: 1

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

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();
}

Upvotes: 2

Maxim Mazurok
Maxim Mazurok

Reputation: 4138

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()

Upvotes: 4

Related Questions