preventDefault是否正在停止传播？

Question

Using legacy .NET Web Forms, I have a scenario where the user wants to calculate values when pressing the enter key in a given textbox. This works fine, however, the enter keypress is also firing the default form submit button on the page.

I have tried to get around it by adding event.preventDefault() and return false to the textbox's event handler, but the form is submitting prior to the event occurrence so this code has no affect.

$("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;
    }
});

After reading a bit more, I learned that I could attach an event handler to the default form and use preventDefault() to allow propagation of events:

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

With this method, the form is not submitted, but the input keypress event is not handled. How can I ensure that the form is not submitted but also the input keypress calculates the values?

Answer 1

No, preventDefault is not stopping propagation. These two functions have quite different functionality.

stopPropagation stops the event from going up the event chain.

preventDefault prevents the default action in the event inside which it is called. However, the event still propagates up the chain.

return false is equivalent with calling both preventDefault() and stopPropagation() . However calling the functions is the preferred way because you can call them at the start of the function. return false can be obviously used only at the end, and and error would prevent it from running.

This is why most of the time you end up using both these functions in conjunction.

Such is your case here, you have to use both .

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