javascript - 取消 HTML onSubmit 事件

标签 javascript html

所以我将我的问题浓缩成一小段 HTML 代码,供你们自己尝试。

我相信这在 Firefox 3.6 中有效,但在最近的版本中它似乎不再有效。它也不适用于 IE9 或 Firefox Nightly。

    <html>
    <head>
    <title>Test</title>
    </head>
    <script type="text/javascript">
    function newEvent() {
        var myEvent = document.createEvent("MouseEvents");
        myEvent.initEvent("click", false, false);
        getElementById('Test').dispatchEvent(myEvent);
    }
    </script>
    <body>
    <form action="" onSubmit="newEvent();return false;">
      <input name="OK" type="submit" value="OK" />
      <input id="Test" name="Test" type="button" onClick="alert('Success!');" value="Test" />
    </form>
    </body>
    </html>

我遇到的问题是表单正在提交到页面,而我不希望它提交。我试过“return false;”,我试过“event.preventDefault();”。如果您评论 dispatchEvent 行,其他一切都会按预期工作。我相信,由于某种原因,发送一个新事件(点击)似乎允许 onSubmit 事件继续。

您可以通过单击“确定”来测试自己,这应该触发 onSubmit。预期的行为是为“测试”按钮生成点击事件,然后 onSubmit 事件被“return false”取消;部分。

任何见解将不胜感激。

最佳答案

你的代码中遗漏了一些东西:

document.getElementById()

看第三行:

function newEvent() {
    var myEvent = document.createEvent("MouseEvents");
    myEvent.initEvent("click", false, false);
    document.getElementById('Test').dispatchEvent(myEvent);
}

http://jsfiddle.net/csrn5/2/

newEvent()中,第三行需要document.。所以发生的事情是您收到一个错误,该错误会在 JS 到达 return false 之前停止它。

证明问题的另一种方式:

function newEvent() {
    try {
        var myEvent = document.createEvent("MouseEvents");
        myEvent.initEvent("click", false, false);
        getElementById('Test').dispatchEvent(myEvent);
    } catch(e){
        alert(e)
    }
}

http://jsfiddle.net/csrn5/4/

请注意,修复错误,我只是想告诉你这才是真正的问题。

关于javascript - 取消 HTML onSubmit 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8290860/

相关文章:

php - 在 IE(和 Firefox)中处理后退按钮的最佳实践是什么

javascript - 用户可以读取这个文件吗?

javascript - 退出 iframe html 元素?

jquery - Scroll 在 Phonegap 应用程序中无缘无故地显示自己

javascript - 如何扩展 moment.js 并向其中添加新函数/方法?

JavaScript 立即调用函数模式区别

javascript - 在 JavaScript 中从 URL 检查图像宽度和高度

javascript - 如何在本地存储或用户设置的cookie中实现数据存储?

javascript - 被 javascript 困住了(初学者)

jquery 上的 javascript 数组变量