javascript - e.preventDefault() 表现不同

Question

我有一个非常简单的 jQuery UI 旋转器，如下所示:

<input value="2" class="form-control ui-spinner-input" id="spinner" aria-valuemin="2" aria-valuemax="24" aria-valuenow="2" autocomplete="off" role="spinbutton" type="text">

使用 jQuery，我将上面的文本框设置为只读 true/false。只读和值是根据用户选择的复选框设置的，该函数如下所示

 function checkBoxes() {
    var $targetCheckBoxes = $("#BoxFailure,#InstallationFailure");
    $targetCheckBoxes.change(function () {
        var isChecked = this.checked;
        var currentElement = this;
        var $radioButton = $('.usage-failure-type-radio');
        $targetCheckBoxes.filter(function () {
            return this.id !== currentElement.id;
        }).prop('disabled', isChecked);
        $('#spinner').val(isChecked ? this.value : '').prop('readonly', isChecked);
        $radioButton.first().prop('checked', isChecked);
        $radioButton.not(':checked').toggle(!isChecked).parent('label').toggle(!isChecked);
        $('.usage-before-failure > div > span.ui-spinner > a').toggle(!isChecked);
    });
}

现在我想要实现的是，当 #spinner 输入为只读时，如果用户按下退格键，我想阻止默认行为，例如请离开该页面。为此，我想我会做以下事情:

$('.prevent-default').keydown(function (e) {
    e.preventDefault();
});

如果输入在页面加载时具有类 prevent-default ，则效果很好。但是，如果我将其添加到以下行的 checkBoxes 函数中

$('#spinner').val(isChecked ? this.value : '').prop('readonly', isChecked).toggleClass('prevent-default') 

然后我按退格键，它会忽略e.prevenDefault();

但如果我这样做

$('#spinner').val(isChecked ? this.value : '').prop('readonly', isChecked).keydown(function (e) { e.preventDefault(); });

然后就可以正常工作了。

有人可以告诉我为什么会发生这种情况吗？

我想使用带有类名的单独函数的原因是因为我有各种输入，这些输入根据不同的检查/单选值设置为只读。

Answer 1

Can someone tell me why this is happening please

这是由于 DOM 解析器和 JavaScript 执行时间的原因。

如果在执行 JS 之前，您的 DOM 中已经存在一个带有 prevent-default 类的元素，那么 JavaScript 将正确识别并处理它。如果您随后使用 JS 添加该类，则必须再次重新初始化 keydown-event 才能使其工作。

要重新初始化，您将需要这样的东西:

function checkBoxes() {
    var $targetCheckBoxes = $("#BoxFailure,#InstallationFailure");
    $targetCheckBoxes.change(function () {
        ...

        $('#spinner').val(isChecked ? this.value : '').prop('readonly', isChecked).toggleClass('prevent-default');
        // assign new keydown events
        handleKeyDown();
        ...

    });
}

function handleKeyDown() {
    // release all keydown events
    $('#spinner').off( "keydown", "**" );
    $('.prevent-default').keydown(function (e) {
            e.preventDefault();
            // do more stuff...
        });
}