Jump to content

The Preventdefault() Method


iwato

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 comment
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>

Link to comment
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 comment
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 comment
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 comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...