如何解决event.preventDefault()已废弃问题？含代码报错排查

原生JavaScript解决方案 #

方案1：在事件处理函数中直接阻止默认行为 #

把阻止默认行为的逻辑放在按钮的onclick回调里，无需传递event参数给myMethod，避免参数传递可能带来的问题：

var vGetBtn = document.createElement("input");
vGetBtn.type = "image";
vGetBtn.id = "btnGet";
vGetBtn.src = "/someimage.png";
vGetBtn.onclick = function (event) {
    // 先阻止image按钮的默认表单提交行为
    event.preventDefault();
    // 再调用业务方法
    myMethod(BodyControlName, AVoucherNo);
};

function myMethod(ABodyControlName, AVoucherNo) {
    voucherNo = AVoucherNo;
    // 创建对话框逻辑
}

方案2：安全传递并处理event参数 #

如果必须传递event到方法中，添加类型判断避免报错（针对部分环境下事件对象不标准的情况）：

var vGetBtn = document.createElement("input");
vGetBtn.type = "image";
vGetBtn.id = "btnGet";
vGetBtn.src = "/someimage.png";
vGetBtn.onclick = function (event) {
    myMethod(event, BodyControlName, AVoucherNo);
};

function myMethod(AEvent, ABodyControlName, AVoucherNo) {
    // 先判断事件对象是否存在preventDefault方法
    if (AEvent && typeof AEvent.preventDefault === 'function') {
        AEvent.preventDefault();
    }
    voucherNo = AVoucherNo;
    alert('hello');
    // 创建对话框逻辑
}

jQuery解决方案 #

jQuery会自动标准化事件对象，避免环境差异导致的报错，绑定方式更简洁：

// 创建按钮元素并绑定点击事件
var $vGetBtn = $('<input type="image" id="btnGet" src="/someimage.png">');
$vGetBtn.on('click', function(event) {
    event.preventDefault();
    myMethod(BodyControlName, AVoucherNo);
});

// 或者传递event到方法中
function myMethod(AEvent, ABodyControlName, AVoucherNo) {
    AEvent.preventDefault();
    voucherNo = AVoucherNo;
    // 创建对话框逻辑
}

// 记得将按钮添加到DOM中，比如：
// $('body').append($vGetBtn);

报错原因分析 #

你遇到的Uncaught TypeError: AEvent.preventDefault is not a function，大概率是因为：

• 部分旧浏览器或特殊环境下，传递的事件对象不是标准的MouseEvent，缺少preventDefault方法
• 全局event变量被废弃后，手动传递的参数在某些场景下未被正确识别为事件对象

内容的提问来源于stack exchange，提问作者Michael Eriksen