代码之家 › 专栏 › 技术社区 › Ryan Li

如何防止onclick语句被执行?

javascript

Ryan Li · 技术社区 · 16 年前

我想使用事件侦听器来阻止 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>

预期的行为只有“listener”才会被提醒,但在实践中(firefox 3.7A5pre)、“onclick”和“listener”都会按给定的顺序被提醒。

看来 一次点击 正在侦听器之前执行,因此 事件.preventDefault()) 不起作用。有办法防止 一次点击 不会被处决?

2 回复 | 直到 16 年前

T.J. Crowder 16 年前

DOM0处理程序( onclick 属性等)和dom2处理程序(通过 attachEvent / addEventListener )彼此独立。

唯一能做的就是删除dom0处理程序(通过为属性分配一个空字符串),然后只使用dom2处理程序。

在删除dom0处理程序之前,可以从该属性中检索它,并将其重新注册为dom2处理程序。你会遇到一些浏览器不一致(有些会给你一个 Function 对象,其他人会给您一个字符串),但这些字符串很容易在代码中处理。

-1

Andreas 16 年前

您可以尝试以下操作:

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

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

1 年前

Niobos · 如何/是否有方法使通用算法函数同时与同步和异步函数一起工作?

1 年前

Alex · 在轻量级中同时解构和不解构变量

1 年前

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

bairog · 从按属性筛选的对象数组字典中创建值数组

1 年前

KaiMcKiernan · 基于Math.random()的函数在另一个函数内不起作用[关闭]

1 年前

David Jeong · 浏览器不会为浏览器自动添加的某些标头发送CORS预检请求吗?

1 年前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

1 年前

user3472810 · Angular@Output/EventEmitter返回undefined

1 年前

lokiuucx · JS对象属性返回未定义,尽管对象属性应该有值

1 年前