Question

我有一些像这样的代码：

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

function changeCheckbox() {

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

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

        button.hide();

    } else {

        button.show();
    }
}

这项工作在所有现代浏览器和IE 8中都很完美

但是当我使用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();
    }
}

或我设置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
}

然后该功能只能运行一次，我只能在（仅） Internet Explorer 8

中执行此操作

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

我还有很多其他功能，最后使用event.preventDefault();和return false;的相似代码，还可以......

我使用这个jQuery版本：jquery_1.10.1.min.js

提前致谢！

Answer 1

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

这是Internet Explorer中的一个错误（还有什么）。 The change event is supposed to be not cancelable，与click个事件相反（请参阅Is event.preventDefault cancelling change events?，jQuery/Javascript: Click event on a checkbox and the 'checked' attribute和Why does preventDefault() on a parent element's click 'disable' a checkbox?）。但是，IE8会阻止在取消change事件时（取消）检查复选框。 Try it here

如何解决这个问题？只需从代码中删除e.preventDefault() (or return false)即可。无论如何，我认为没有理由使用它。

Answer 2

您希望实现的目的是根据#button的值显示/隐藏#checkbox。你可以这样做。与代码

相比，代码行少得多

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

FIDDLE

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

当使用event.preventDefault（）或返回false时，为什么Internet Explorer在函数后停止

3 个答案: