iwato Posted May 22, 2009 Share Posted May 22, 2009 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 More sharing options...
Ingolme Posted May 22, 2009 Share Posted May 22, 2009 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?RoddyTo 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 More sharing options...
jeffman Posted May 22, 2009 Share Posted May 22, 2009 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 More sharing options...
iwato Posted May 22, 2009 Author Share Posted May 22, 2009 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 More sharing options...
iwato Posted May 22, 2009 Author Share Posted May 22, 2009 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 More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.