javascript - 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!

Answer 1

有人可以向我解释为什么会这样吗？

这是 Internet Explorer 中的一个错误（还有什么）。与事件相反，该change事件应该是不可取消click的（请参阅Is event.preventDefault 取消更改事件？，jQuery/Javascript: Click event on a checkbox and the 'checked' attribute and Why does preventDefault() on a parent element's click “禁用”复选框？）。但是，IE8 确实会阻止在change取消事件时（取消）选中该复选框。在这里试试。

如何解决这个问题？只需从您的代码中删除e.preventDefault() （或return false） 。无论如何，我看不出有任何理由使用它。

Answer 2

您想要实现的是#button根据#checkbox. 你可以这样做。与您的代码相比，代码行数非常少

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

小提琴

Answer 3

您可以为 IE8 添加此代码：

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

由于您使用的是 jQuery，因此您可以使用内置的跨浏览器事件修复：

event = $.event.fix(event);

见：http ://www.jquerysdk.com/api/jQuery.event.fix