Question

使用旧的.NET Web窗体，我有一个场景，用户想要在按下给定文本框中的回车键时计算值。这样可以正常工作，但是，Enter按键还会触发页面上的默认表单提交按钮。

我尝试通过将event.preventDefault()和return false添加到文本框的事件处理程序来绕过它，但表单在事件发生之前提交，因此此代码没有任何影响。

$("input[type='text']").keypress(function (event) {
    if (event.keyCode == 13) {
        var regionId = $(this).attr("data-region-id");
        var subRegionId = $(this).attr("data-subregion-id");
        var multiplier = $(this).val();
        CalculateSales(regionId, subRegionId, multiplier);
        event.preventDefault();
        return false;
    }
});

在阅读了一下之后，我了解到我可以将事件处理程序附加到默认表单并使用preventDefault()来传播事件：

$("#form").on("keyup keypress", function(e) {
    var code = e.keyCode || e.which; 
    if (code  == 13) {               
        e.preventDefault();
    }
});

使用此方法，表单未提交，但未处理输入按键事件。如何确保未提交表单，还输入按键计算值？

Answer 1

不，preventDefault没有阻止传播。这两个功能具有完全不同的功能。

stopPropagation阻止事件进入事件链。

preventDefault会阻止调用它的事件中的默认操作。但是，事件仍会传播向上链。

return false与调用preventDefault() and stopPropagation()同等效。但是调用函数是首选方法，因为您可以在函数的开头调用它们。 return false显然只能在最后使用，并且错误会阻止它运行。

这就是为什么大部分时间你最终同时使用这两个功能的原因。

这是你的情况，你必须同时使用。

$("#form").on("keyup keypress", function(e) {
    var code = e.keyCode || e.which; 
    if (code  == 13) {               
        e.preventDefault();
        e.stopPropagation();
    }
});

preventDefault正在停止传播？

1 个答案: