Question

我有一个按钮，可以在我的页面上执行搜索操作。我正在使用jquery对5位数的邮政编码进行简单验证。如果邮政编码无效，我正在使用preventDefault来停止我的按钮运行搜索。但是，preventDefault方法似乎不起作用。即使邮政编码未经过正确验证，它仍会运行搜索。

这是我的jquery代码：

    var j$ = jQuery.noConflict();

    j$(document).ready(function() {
        var searchButton = j$('[id$=theFilterButton]');
        var isValid = true;
        searchButton.click(function(e) {
            var zip = j$('[id$="ZipCodeFilter"]').val();
            var reg = /^[0-9]+$/;
            if((zip.length) < 5 || (zip.length) > 5 ) {
                isValid = false;
                console.log("zip code length is not 5");
            }
            if (!reg.test(zip)){
                isValid = false;
                console.log("zip is not digits");
            }
            if(!isValid) {
                console.log("zip is not valid. Stop processing!!!!");
                e.stopPropagation();
                e.preventDefault();
                return false;
            }
        });     
    });

不应该使用preventDefault方法停止按钮调用类文件中的代码吗？

感谢您的帮助。问候。

Answer 1

它只会阻止发生默认操作。如果在DOM树中有一个更高的事件处理程序（比如父表单），它处理提交表单（事件气泡到那个）preventDefault将不会停止。

相反，您需要拨打stopPropagation（有或没有preventDefault，具体取决于默认操作）

使用jQuery时也可以使用

return false（类似于使用preventDefault调用stopPropagation）。

这是一个演示preventDefault和stopPropagation的小提琴：

http://jsfiddle.net/1jfpkf1n/

第一个方块，如果单击内部，将抛出两个警报（如果内部方块是链接 - 页面不会导航，但外部事件侦听器仍然被调用...）

第二个方块，当您单击内部框时，将发出警报，但随后停止冒泡（感谢stopPropagation）。

preventDefault不会阻止按钮调用我的类文件中的方法

1 个答案: