Question

我想使用事件监听器来阻止提交按钮的onclick语句，但是，使用event.preventDefault()无法按预期工作。

代码是这样的：

<?xml version="1.0" encoding="utf-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="application/x-javascript">
        function addListener() {
            document.getElementById("submit").addEventListener("click",
                function(ev) {
                    alert("listener");
                    ev.preventDefault();
                },
                false);
        }
    </script>

    <title></title>

</head>

<body onload="addListener();">
<form id="form" method="post" target="">
<input type="submit" id="submit" onclick="alert('onclick')" value="test" />
</form>

</body>

</html>

预期的行为只会提醒“听众”，但在实践中（Firefox 3.7a5pre），“onclick”和“listener”都会按照给定的顺序发出警告。

似乎onclick正在侦听器之前执行，因此event.preventDefault()不起作用。有没有办法防止onclick被执行？

Answer 1

DOM0处理程序（onclick属性等）和DOM2处理程序（通过attachEvent / addEventListener动态添加）彼此独立。

你唯一能做的就是删除DOM0处理程序（通过为属性分配一个空字符串）并使用DOM2处理程序。

您可以在删除之前从属性中检索DOM0处理程序，并将其重新注册为DOM2处理程序。你会遇到一些浏览器的不一致（有些会给你一个Function对象，有些会给你一个字符串），但这些很容易在代码中处理。

Answer 2

你可以试试这个：

 function addListener() {
        document.getElementById("submit").addEventListener("click",
            function(ev) {
                alert("listener");
                ev=ev¦¦event; 
                ev.preventDefault? ev.preventDefault() : ev.returnValue = false; 
            },
            false);
    }

如何防止执行onclick语句？

2 个答案: