Why Internet Explorer stop after a function when use event.preventDefault() or return false

Question

I have a little code like this:

$("input#checkbox").change(changeCheckbox);

function changeCheckbox() {

    var inputCheck = $("input#checkbox"),
        button = $("input#button");

    if (inputCheck.is(":checked")) {

        button.hide();

    } else {

        button.show();
    }
}

This work perfect in all modern Browser and IE 8

But when I use this one with event.preventDefault();:

$("input#checkbox").change(changeCheckbox);

function changeCheckbox(event) {

    event.preventDefault(); // <-- Here

    var inputCheck = $("input#checkbox"),
        button = $("input#button");

    if (inputCheck.is(":checked")) {

        button.hide();

    } else {

        button.show();
    }
}

or I set return false;

$("input#checkbox").change(changeCheckbox);

function changeCheckbox() {

    var inputCheck = $("input#checkbox"),
        button = $("input#button");

    if (inputCheck.is(":checked")) {

        button.hide();

    } else {

        button.show();
    }

return false; // <-- Here
}

then the function only works once and I can do nothing more with this in (only) Internet Explorer 8

Can someone explain to me why this happens?

And i have a lot of other functions and use similar codes with event.preventDefault(); and return false; at the end and there are OK...

I use this jQuery Version: jquery_1.10.1.min.js

Thanks in advance!

You mean the handler is not triggered again, and subsequent clicks will not do anything? Please be more specific about "*I can do nothing more*". — Bergi, Aug 27 '13 at 23:33
@Bergi - In this example I can`t checked the Checkbox after call the function once — Black Sheep, Aug 27 '13 at 23:37
@dqf13g32g Well, that's the default action of a `type="checkbox"` -- it switches between checked and unchecked. Preventing that instructs it not to change. Or, am I misunderstanding your comment? — Jonathan Lonowski, Aug 27 '13 at 23:43
@JonathanLonowski - Ok and why I have problems with `return false;`? Thanks — Black Sheep, Aug 27 '13 at 23:45
@dqf13g32g: Because [`return false` *is* `event.preventDefault()` in jQuery](http://stackoverflow.com/questions/1357118/event-preventdefault-vs-return-false) — Bergi, Aug 27 '13 at 23:46
@Bergi - Thank you for your answers - Now it is clearer for me! :-) — Black Sheep, Aug 27 '13 at 23:53
@JonathanLonowski: However it indeed is a bug in IE. A `change` event should not reset the checkbox when preventing the default action, only a `click` event would. [Try it here](http://jsfiddle.net/8NSDa/) — Bergi, Aug 27 '13 at 23:57

score 4 · Accepted Answer · edited May 23 '17 at 11:49

Can someone explain to me why this happens?

It's a bug in Internet Explorer (what else). The change event is supposed to be not cancelable, in contrast to click events (see Is event.preventDefault cancelling change events?, jQuery/Javascript: Click event on a checkbox and the 'checked' attribute and Why does preventDefault() on a parent element's click 'disable' a checkbox?). IE8 however does prevent the checkbox from being (un)checked when the change event is canceled. Try it here.

How to work around that? Just remove e.preventDefault() (or return false) from your code. I don't see any reason to use it anyway.

score 1 · Answer 2 · answered Aug 27 '13 at 23:44

1

What you want to achieve is to show/hide #button based on the value of #checkbox. You can do it this way. Very less lines of code as compared to your code

$('#checkbox').on('change', function() {
    $('#button').toggle(this.checked);
});

FIDDLE

answered Aug 27 '13 at 23:44

Khawer Zeshan

9,470
6
40
63

score 0 · Answer 3 · answered Aug 27 '13 at 23:33

0

You can add this code for IE8:

if (event.preventDefault) event.preventDefault();
else event.returnValue = false;

Since you are using jQuery you can use the built-in cross-browser event fix:

event = $.event.fix(event);

See: http://www.jquerysdk.com/api/jQuery.event.fix

answered Aug 27 '13 at 23:33

Ozzy

8,244
7
55
95

He's using jQuery, so `preventDefault` is fine. – Bergi Aug 27 '13 at 23:35
But does jquery_1.10.1 support old IE? – Musa Aug 27 '13 at 23:36
1

@Musa [Yeah](http://jquery.com/browser-support/). It's 2.x that doesn't support IE 8 and older. – Jonathan Lonowski Aug 27 '13 at 23:39

Why Internet Explorer stop after a function when use event.preventDefault() or return false

3 Answers3