onClick 事件在表单标签内不起作用

Question

<!DOCTYPE html>
<html>
    <head>
    </head>
    <script>    
        function removeP2() {
            var parent = document.getElementById("section");
            var child = document.getElementById("p2");
            parent.removeChild(child);
        }
    </script>
    <body>
        <nav>
            <form>
               <button onclick="removeP2();">Remove</button> 
            </form>
        </nav>
        <section id="section">
            <p id="p1">Paragraph One.</p>
            <p id="p2">Paragraph Two.</p>
        </section>
    </body>
</html>

当我点击提交按钮时，函数照常执行，但在函数执行后，页面会自行重新加载（删除 P2 一秒钟）。

我找到了一个解决办法，就是删除"nav"标签里面的"Form"，效果很好。只是想问一下是什么问题导致的，如果我需要在 "nav" 标签中包含 "Form" 标签，我需要修复哪一部分？

Answer 1

使用下面的代码。它不会提交表单。

<button type="button">My Button</button>

Answer 2

查看此代码：

https://jsfiddle.net/y7mhu3oL/1/

解决方案在表单标签中提交：

<script>    
    function removeP2() {
        document.getElementById("p2").remove();
        }   
    </script>
<body>
    <nav>
        <form method="POST" onsubmit="removeP2(); return false;">
           <button>Remove</button> 
        </form>
    </nav>
    <section id="section">
        <p id="p1">Paragraph One.</p>
        <p id="p2">Paragraph Two.</p>
    </section>
</body>

Answer 3

event.preventDefault() 是正确答案。当您按下表单内的按钮时，它将自动提交该表单，除非您使用 event.preventDefault;

阻止默认操作

function removeP2(event) {
    event.preventDefault()
    var parent = document.getElementById("section");
    var child = document.getElementById("p2");
    parent.removeChild(child);
}

Answer 4

正在提交表单，您的页面已重新加载。您需要停止表单提交。

解决方案 1：向您的按钮添加一个 type 属性。

<button type="button" onclick="removeP2();">Remove</button>

这将确保按钮不是 submit 类型（当未指定类型时，这是表单标签内按钮的默认类型），并且表单不会在点击时提交。

解决方案 2： 阻止 javascript 中的提交事件。所以做出这些改变。

<button onclick="removeP2(event);">Remove</button>

并在脚本中阻止此事件

 function removeP2(event) {
   event.preventDefault(); // prevent the event , ie form submit event
   var parent = document.getElementById("section");
   var child = document.getElementById("p2");
   parent.removeChild(child);
 }

解决方案 3： 我认为 HTML 中不需要表单标签。如果它的语法完全符合您的语法，并且您确实没有任何其他元素或提交表单的目的，那么您可以删除 form 标签。

 <nav>
   <button onclick="removeP2();">Remove</button>         
 </nav>

Answer 5

因为您没有定义按钮 type，您的浏览器假设按钮是 type="submit" 并尝试 "submit" 表单（即使您没有定义任何方法或动作）。

如果您将 type="button" 添加到按钮标记，它会覆盖 submit 的默认假设并且不会尝试提交表单。

jsfiddle: https://jsfiddle.net/hdpk8c3n/

Answer 6

将 type="button" 添加到您的按钮标签。在表单标签中，按钮的默认类型是提交。这就是为什么当您单击按钮时，会提交表单并重新加载页面。

onClick 事件在表单标签内不起作用

onClick event doesn't work inside form tag

html

javascript

dom

onclick

onsubmit