Question

我很难处理addEventListener“submit”到表单。这是脚本：

<html>
    <head>
        <title>Testing Hehe</title>
    </head>
    <body>
        <form action="" method="post">
            <input type="text" name="q" onclick="this.parentNode.submit();" />
            <input type="submit" value="Testing" />
        </form>
        <script type="text/javascript">
            console.log(document.readyState);
            window.onload = function(){
                console.log(document.readyState);
                document.forms[0].addEventListener('submit',function(e){
                    e.preventDefault();
                },false);

                var form = document.createElement('form');
                    form.method= "post";
                var input= document.createElement('input');
                    input.type = "text";
                    input.name = "test";
                    input.addEventListener('click',function(){
                    form.submit();
                    },false);
                form.appendChild(input);
                var input2= document.createElement('input');
                    input2.type = "submit";
                    input2.name = "sbt";
                form.appendChild(input2);
                form.addEventListener('submit',function(e){
                    alert("test");
                    e.preventDefault();
                },false);
                document.body.appendChild(form);
            }
        </script>
    </body>
</html>

<?php
if($_POST){
    print_r($_POST); 
    exit;
}
?>

从上面的脚本中，我在点击提交按钮时成功获取了表单提交事件，但是当我将提交触发器更改为其他部分时，例如单击文本框时，“提交”事件仍然直接发布。我不明白为什么会这样，以及如何解决这个问题。

感谢您的关注:-)而您的答案对我来说会很棒： - ）

Answer 1

而不是使用：

input.addEventListener('click',function(){
                    form.submit();
                    },false);

您可以使用：

input.addEventListener('click',function(){
                    input2.click();
                    },false);

请务必在var input2= document.createElement('input');之前移动。

示例：http://jsfiddle.net/niklasvh/wcpx4/

为什么addEventListener表单提交不起作用？

1 个答案: