event.preventDefault() function not working in IE

Go To StackoverFlow.com

195

Following is my JavaScript (mootools) code:

$('orderNowForm').addEvent('submit', function (event) {
    event.preventDefault();
    allFilled = false;
    $$(".required").each(function (inp) {
        if (inp.getValue() != '') {
            allFilled = true;
        }
    });

    if (!allFilled) {
        $$(".errormsg").setStyle('display', '');
        return;
    } else {
        $$('.defaultText').each(function (input) {
            if (input.getValue() == input.getAttribute('title')) {
                input.setAttribute('value', '');
            }
        });
    }

    this.send({
        onSuccess: function () {
            $('page_1_table').setStyle('display', 'none');
            $('page_2_table').setStyle('display', 'none');
            $('page_3_table').setStyle('display', '');
        }
    });
});

In all browsers except IE, this works fine. But in IE, this causes an error. I have IE8 so while using its JavaScript debugger, I found out that the event object does not have a preventDefault method which is causing the error and so the form is getting submitted. The method is supported in case of Firefox (which I found out using Firebug).

Any Help?

2009-06-16 10:09
by sv_in
It does; according to the docs (http://mootools.net/docs/core/Native/Event#Event:preventDefault) what he has should work: "Event Method: preventDefault - Cross browser method to prevent the default action of the event. - Paolo Bergantino 2009-06-16 10:15
My bad, i deleted my comment, which was "doesn't mootools have a method to stop events?". So there's a problem with mootools on ie8.. - Alsciende 2009-06-16 10:17
Can't reproduce this issue. This fiddle "works for me on ie 8" Could you setup a reduced fiddle to show the error? http://jsfiddle.net - eerne 2011-05-24 10:04


457

in IE, you can use

event.returnValue = false;

to achieve the same result.

And in order not to get an error, you can test for the existence of preventDefault:

if(event.preventDefault) event.preventDefault();

You can combine the two with:

event.preventDefault ? event.preventDefault() : (event.returnValue = false);
2009-06-16 10:10
by Alsciende
The following code worked for me:

if (event.preventDefault) { event.preventDefault(); } else { event.returnValue = false; - sv_in 2009-06-16 10:32

event.preventDefault ? event.preventDefault() : event.returnValue = false;mortiy 2011-03-06 13:43
It's worth noting that "event" must be the global event object in IE8. You can't use the event passed into the event handler, like e.preventDefault, it must be event.preventDefault in order for this to work in IE8 - jmort253 2012-04-05 17:16
event.preventDefault(); stopped working for me in FireFox for some reason, out of the blue. Used mority's code and it worked great. Thanks - James 2012-04-05 18:29
If the event comes from an eventhandler bound with mootools addEvent(), the event parameter passed to your handler will always have preventDefault(). If you use IE specific AddEventListener or HTML onclick="" you won't get this help from mootools - oldwizard 2012-11-21 14:27
Thank you! I used this solution in a mousedown handler and in my system with IE8 I need to add an handler to "ondragstart" that returns false - Edoardo Panfili 2013-08-10 19:23
Is this workaround really needed? It looks like jQuery has worked correctly since v1.3. See the source and blame - Kevin Kuszyk 2014-03-12 10:26
Just to add some clarity to @jmort253's comment: $('.something').click(function(e){ e.preventDefault ? e.preventDefault() : event.returnValue = false; });Luke 2014-12-18 10:01
It worked for me. I was working on a Angular 4 application and in Typescript I need to use switch(event.keyCode.toString()) to check what key user selected.. - Ziggler 2017-12-23 00:35


23

If you bind the event through mootools' addEvent function your event handler will get a fixed (augmented) event passed as the parameter. It will always contain the preventDefault() method.

Try out this fiddle to see the difference in event binding. http://jsfiddle.net/pFqrY/8/

// preventDefault always works
$("mootoolsbutton").addEvent('click', function(event) {
 alert(typeof(event.preventDefault));
});

// preventDefault missing in IE
<button
  id="htmlbutton"
  onclick="alert(typeof(event.preventDefault));">
  button</button>

For all jQuery users out there you can fix an event when needed. Say that you used HTML onclick=".." and get a IE specific event that lacks preventDefault(), just use this code to get it.

e = $.event.fix(e);

After that e.preventDefault(); works fine.

2012-11-21 14:29
by oldwizard
+1 for the awesome jQuery fix : - Evildonald 2012-11-26 19:55
Unfortunately this trick is not working for me . I am using IE 10 and before calling e.preventDefault(); I cam calling $.event.fix(e); with no success : - Beatles1692 2015-05-29 15:27
It might have been removed from jquery 2? But IE10 does not need the fix - oldwizard 2015-05-29 15:43
Did you assign the fixed event to the e variable again - oldwizard 2015-12-02 09:43


11

I know this is quite an old post but I just spent some time trying to make this work in IE8.

It appears that there are some differences in IE8 versions because solutions posted here and in other threads didn't work for me.

Let's say that we have this code:

$('a').on('click', function(event) {
    event.preventDefault ? event.preventDefault() : event.returnValue = false;
});

In my IE8 preventDefault() method exists because of jQuery, but is not working (probably because of the point below), so this will fail.

Even if I set returnValue property directly to false:

$('a').on('click', function(event) {
    event.returnValue = false;
    event.preventDefault();
});

This also won't work, because I just set some property of jQuery custom event object.

Only solution that works for me is to set property returnValue of global variable event like this:

$('a').on('click', function(event) {
    if (window.event) {
        window.event.returnValue = false;
    }
    event.preventDefault();
});

Just to make it easier for someone who will try to convince IE8 to work. I hope that IE8 will die horribly in painful death soon.

UPDATE:

As sv_in points out, you could use event.originalEvent to get original event object and set returnValue property in the original one. But I haven't tested it in my IE8 yet.

2013-12-13 13:55
by muffir
You can also get the original browser event object from event.originalEvent. More Info: http://stackoverflow.com/a/16675056/2255 - sv_in 2013-12-29 14:11
Thanks for info. I will update my post - muffir 2014-01-21 10:21


6

Mootools redefines preventDefault in Event objects. So your code should work fine on every browser. If it doesn't, then there's a problem with ie8 support in mootools.

Did you test your code on ie6 and/or ie7?

The doc says

Every event added with addEvent gets the mootools method automatically, without the need to manually instance it.

but in case it doesn't, you might want to try

new Event(event).preventDefault();
2009-06-16 10:26
by Alsciende
There was some problem when wrapping like this also in IE.

Oh my God! Why IE - sv_in 2009-06-16 10:34

new Event(e).stop(); works in IE6 onward - Dimitar Christoff 2009-06-26 16:14
She doesn't want to stop the event, though, just prevent its default action - Alsciende 2009-06-30 13:39


4

if (e.preventDefault) {
    e.preventDefault();
} else {
    e.returnValue = false;
}

Tested on IE 9 and Chrome.

2013-04-09 22:52
by RolandoCC
Doesn't work in IE 11 (e.preventDefault is a function, although it doesn't seem to do anything - GreySage 2018-09-12 18:16


3

To disable a keyboard key after IE9, use : e.preventDefault();

To disable a regular keyboard key under IE7/8, use : e.returnValue = false; or return false;

If you try to disable a keyboard shortcut (with Ctrl, like Ctrl+F) you need to add those lines :

try {
    e.keyCode = 0;
}catch (e) {}

Here is a full example for IE7/8 only :

document.attachEvent("onkeydown", function () {
    var e = window.event;

    //Ctrl+F or F3
    if (e.keyCode === 114 || (e.ctrlKey && e.keyCode === 70)) {
        //Prevent for Ctrl+...
        try {
            e.keyCode = 0;
        }catch (e) {}

        //prevent default (could also use e.returnValue = false;)
        return false;
    }
});

Reference : How to disable keyboard shortcuts in IE7 / IE8

2013-11-14 15:27
by JBE


2

Here's a function I've been testing with jquery 1.3.2 and 09-18-2009's nightly build. Let me know your results with it. Everything executes fine on this end in Safari, FF, Opera on OSX. It is exclusively for fixing a problematic IE8 bug, and may have unintended results:

function ie8SafePreventEvent(e) {
    if (e.preventDefault) {
        e.preventDefault()
    } else {
        e.stop()
    };

    e.returnValue = false;
    e.stopPropagation();
}

Usage:

$('a').click(function (e) {
    // Execute code here
    ie8SafePreventEvent(e);
    return false;
})
2009-09-18 05:29
by NoName
I have never seen this stop method before, and I couldn't find it in msdn. What does it do - Oriol 2013-09-23 18:27
.stop() throws an exception, because it doesn't exist. Any exception will have the desired effect - Jay Bazuzi 2014-06-30 15:35


1

preventDefault is a widespread standard; using an adhoc every time you want to be compliant with old IE versions is cumbersome, better to use a polyfill:

if (typeof Event.prototype.preventDefault === 'undefined') {
    Event.prototype.preventDefault = function (e, callback) {
        this.returnValue = false;
    };
}

This will modify the prototype of the Event and add this function, a great feature of javascript/DOM in general. Now you can use e.preventDefault with no problem.

2016-11-11 18:57
by EliuX


0

return false in your listener should work in all browsers.

$('orderNowForm').addEvent('submit', function () {
    // your code
    return false;
}
2014-12-05 10:37
by daemon1981


0

FWIW, in case anyone revisits this question later, you might also check what you are handing to your onKeyPress handler function.

I ran into this error when I mistakenly passed onKeyPress(this) instead of onKeyPress(event).

Just something else to check.

2015-06-22 22:51
by Kirby L. Wallace


0

I was helped by a method with a function check. This method works in IE8

if(typeof e.preventDefault == 'function'){
  e.preventDefault();
} else {
  e.returnValue = false;
}
2018-01-16 11:37
by Pablo
Ads