Question

所以我把我的问题浓缩成了一段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事件继续。

您可以点击“确定”进行自我测试，然后点击“提交”。预期的行为是为“Test”按钮生成click事件，然后通过“return false”取消onSubmit事件。部分。

非常感谢任何见解。

Answer 1

您的代码中缺少某些内容：

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/

注意，修复错误，我只是想告诉你那是实际问题。

取消HTML onSubmit事件

1 个答案: