javascript - event.preventDefault() or return false don't work in IE9 - Stack Overflow

admin管理员组

文章数量:1335887

I'm trying to get the following code to work in all versions of IE, as it works find in other browsers:

  <a href="" class="specificClass">Click Me </a>
    //Javascript
     $(".specificClass").click(
                        function(e) {
                            e.preventDefault();
                           // Do Something
                             //return false; Doesn't work either
                        }
                );

Switching to href="#" makes it try to go to the top of the page, again only in IE9. For example: Leaving href="" redirects to the current link itself in IE9.

<a href="#" onclick="doSomething(this); return false;"> Click Me Two </a>

It seems like both approaches triggers the onclick Javascript to be called, but the default behavior for href="" is not getting overridden. If I use event.preventDefault() nothing happens.

The below approach works:

<a href="javascript:doSomething(this);"> Click Me Two </a>
function doSomething(me) {

    // event.preventDefault is not needed as the javascript is added via href

}

However I don't want to have href="javascript:" or onclick ="doSomething"for all my anchor tags just to get it to work in IE9. I also don't want to use a different tag (tried the span tag for example) since it is tricky to style up in all browsers.

Any other ideas?

Looks like it is a legit bug, I have submitted a request to fix it. I have also put in a workaround for now:

I'm trying to get the following code to work in all versions of IE, as it works find in other browsers:

  <a href="" class="specificClass">Click Me </a>
    //Javascript
     $(".specificClass").click(
                        function(e) {
                            e.preventDefault();
                           // Do Something
                             //return false; Doesn't work either
                        }
                );

Switching to href="#" makes it try to go to the top of the page, again only in IE9. For example: Leaving href="" redirects to the current link itself in IE9.

<a href="#" onclick="doSomething(this); return false;"> Click Me Two </a>

It seems like both approaches triggers the onclick Javascript to be called, but the default behavior for href="" is not getting overridden. If I use event.preventDefault() nothing happens.

The below approach works:

<a href="javascript:doSomething(this);"> Click Me Two </a>
function doSomething(me) {

    // event.preventDefault is not needed as the javascript is added via href

}

However I don't want to have href="javascript:" or onclick ="doSomething"for all my anchor tags just to get it to work in IE9. I also don't want to use a different tag (tried the span tag for example) since it is tricky to style up in all browsers.

Any other ideas?

Looks like it is a legit bug, I have submitted a request to fix it. I have also put in a workaround for now: https://connect.microsoft./IE/feedback/details/812247/event-preventdefault-or-return-false-dont-work-in-ie9

• javascript
• cross-browser
• internet-explorer-9

Share Improve this question Follow edited Dec 27, 2013 at 21:49 Loser Coder asked Dec 23, 2013 at 21:00 Loser CoderLoser Coder 2,4281212 gold badges4646 silver badges6666 bronze badges 8

• I see jQuery in your code - Note jQuery events and normal DOM events are different, does preventDefault not work even within jQuery? – Benjamin Gruenbaum Commented Dec 23, 2013 at 21:04
• 3 And it does of course work in all other browsers ? – adeneo Commented Dec 23, 2013 at 21:09
• Just for the record, in your actual page the first above JS is in a script tag and below the link - correct? – Benjamin Gruenbaum Commented Dec 23, 2013 at 21:09
• Yes, The code is in a Javascript file and there is JQuery included as a library. preventDefault is not working even within the JQuery format, though it seems like it is triggered (added a debug point using the developer tools). My code is just an example to show what's happening. @adeneo Of course :) – Loser Coder Commented Dec 23, 2013 at 21:13
• if it helps, the HTML is generated via ASP code. Maybe something's going on there that doesn't add the .click trigger in JQuery in time on clicking? – Loser Coder Commented Dec 23, 2013 at 22:07

 |  Show 3 more ments

3 Answers 3

Sorted by: Reset to default 3

In IE9 the legacy event handler model is still partial used. preventDefault() works only, when the event listener is attached using addEventListener().

If you want to prevent default action from an inline handler, you have to use the legacy method:

event.returnValue = false;
event.cancelBubble = true; // This is affects like event.stopPropagation() in older IEs

Though jQuery not working is odd, I've no explanation for that... Unless you're running IE in patible mode and use jQuery 2.X?

---

EDIT

Also a reference to console object will break the code in IE<10, if Dev Tools are not opened. You can find a lot of fixes for this problem at SO. My favorite is this:

// The very first lines in the global context
if (!window.console) {
    window.console = {
        log: function () {}
        // Add other console methods, if the scripts on the page are using them
    }
}

Though the console problem can be avoided with the code above, it's always better to remove all loggings from the final code to be published.

For IE9, if there is any console.log anywhere on the site, there will be unexpected behavior unless you have the developer tools open. Improbable for an actual user.

See how it works fine without any console.log (in IE9): jsfiddle/4hfjq/10, but not when you do: jsfiddle/4hfjq/20 tries to re-direct to "" page, unless you have the developer tool open.

In my case, there were just too many console.logs and so I go with another workaround, i.e. Use <a href="javascript:doSomething()">Link </a> and define that code without using JQuery .eventType approach. Check this: jsfiddle/4hfjq/22

This could be due to event bubbling.

See this link: http://api.jquery./event.stopPropagation/

event.stopPropagation();

本文标签： javascripteventpreventDefault() or return false don39t work in IE9Stack Overflow