Jump to content

The Preventdefault() Method


Recommended Posts

QUESTION: Why would the following code fail to stop the default behavior of the anchor tag? function userControl(element) { var defaultControl = confirm("If true, click OK"); if (defaultControl !== true) { element.preventDefault(defaultControl); } }<p>This <a href="http://www2.gol.com/users/hsmr/emblem/name.html" onclick="userControl(this)">hyperlink</a> demonstrates how the function to which the event-handler refers can be used to prevent the default behavior of the anchor tag.</p>Can you fix it?Roddy

Link to post
Share on other sites
QUESTION: Why would the following code fail to stop the default behavior of the anchor tag? function userControl(element) { var defaultControl = confirm("If true, click OK"); if (defaultControl !== true) { element.preventDefault(defaultControl); } }<p>This <a href="http://www2.gol.com/users/hsmr/emblem/name.html" onclick="userControl(this)">hyperlink</a> demonstrates how the function to which the event-handler refers can be used to prevent the default behavior of the anchor tag.</p>Can you fix it?Roddy
To stop the link from working, you just return false.
function userControl() {  return confirm("Click OK to continue, click Cancel to pevent the link from working.");}

<p>This <a href="http://www2.gol.com/users/hsmr/emblem/name.html" onclick="return userControl()">hyperlink</a> will work if you click "OK" and will not work if you click "Cancel".</p>

Edited by Ingolme
Link to post
Share on other sites

As far as I know, preventDefault() is not supported by IE6-7. I don't know about 8. Where it does work, it is a method belonging to an event object, not a page element.Returning false may seem old-fashioned, but it is the tried-and-true, cross-browser way of intercepting an event.

Link to post
Share on other sites
To stop the link from working, you just return false.
function userControl() {  return confirm("Click OK to continue, click Cancel to pevent the link from working.");}

<p>This <a href="http://www2.gol.com/users/hsmr/emblem/name.html" onclick="return userControl()">hyperlink</a> will work if you click "OK" and will not work if you click "Cancel".</p>

Yes, thanks Ingolme. I was stumbling on the double return. I had tried so many different code arrangements before posting. Only after I posted, did I figure it out on my own. It really does make good sense. In any case, thank you for the confirmation.Roddy
Link to post
Share on other sites
As far as I know, preventDefault() is not supported by IE6-7. I don't know about 8. Where it does work, it is a method belonging to an event object, not a page element.
One of the ways that I had tried wasdocument.getElementById("someID").preventDefault();but this failed in all of my test-browsers including the most recent versions of Firefox, Safari, and Opera.
Returning false may seem old-fashioned, but it is the tried-and-true, cross-browser way of intercepting an event.
It was not a question of being old-fashioned. Simply I wanted to yield control to the user.By the way, during my investigation I found the following page: Event Compatibility Tables. It might prove useful to others.
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...