Question

单击提交按钮时，为什么alert('hi')根本不工作？

evt.preventDefault();＆amp; evt.stopPropagation();是为了防止表单尝试打开另一个窗口。然而，即使我删除这些行，我的功能仍然没有被调用...

'use strict';
function handleSubmission(evt) {
  evt.preventDefault();
  evt.stopPropagation();
  
  alert('hi');
}

var form = document.querySelector('#formID');
form.addEventListener('submit', handleSubmission);

<!DOCTYPE html>
<html lang="en-US">
  <body>
    <form action="" method="post" id="formID">
      
      input <input type="text">
      
      <input type="submit" value="submit">
      
    </form>
  </body>
</html>

控制台中没有出现任何错误。

编辑：更加混乱。上面的代码段不适用于Stack Overflow或我的本地（chrome）浏览器。但是，在jsfiddle上，警报就可以了...... https://jsfiddle.net/jpazrjt4/1/

Answer 1

下面是一个SO片段，提供了使用纯Javascript完成此操作的方法，但是当您单击“运行代码片段”时，它将无法正常运行。

我想解决您对SO Snippet不起作用的担忧。 SO片段不允许在iframe沙箱中提交表单。如果您在Chrome中运行SO片段然后打开开发人员工具（Ctrl + Shift + I），您将在控制台日志条目中看到

阻止表单提交给＆＃39;＆＃39;因为表格的框架是沙盒的，并且“允许形式”是权限未设置。

Jsfiddle不限制其构造的iframe的allow-forms权限。这是JSFiddle链接，因此您可以测试它：jsFiddle:jsFormIntercept

＆＃13;

(function() {
"use strict";

   window.addEventListener("load", function() {
   document.getElementById("formID").addEventListener("submit", function(event) {
   event.preventDefault(); // Prevent form submission
   alert('hi');
 }, false);
   }, false);
 }());

＆＃13;

<!DOCTYPE html>
<html lang="en-US">
  <body>
    <form action="" method="post" id="formID">
      
      input <input type="text">
      
      <input type="submit" value="submit">
      
    </form>
  </body>
</html>

＆＃13;

Answer 2

您只需将以下代码编写为evt.preventDefault()＆amp; evt.stopPropagation()两者都有不同的功能

'use strict';
function handleSubmission(evt) {
  evt.preventDefault();
  alert('hi');
}

Answer 3

e.preventDefault和e.stopPropagation是jQuery函数，只有在使用jquery库时才有效。

我似乎无法找到一个vanila JavaScript方法来实现，所以你现在必须使用jquery

JS as：

    function handleSubmission(evt) {
  evt.preventDefault();
  evt.stopPropogation();

  alert('hi');
}

var form = document.querySelector('#formID');
form.addEventListener('submit', handleSubmission);

和HTML as：

    <!DOCTYPE html>
<html lang="en-US">
  <body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <form action="" method="post" id="formID">

      input <input type="text">

      <input type="submit" value="submit">

    </form>
  </body>
</html

通过测试

Answer 4

实际上，当单击该按钮时，会显示一个警报，提示“ HI”，并且由于event.preventDefault（）

，该提交不会进行任何操作。

Answer 5

很酷的改变你的代码，请在此之前调用jquery因为stoppropogation是jquery库的一部分可能这不会在这里工作，但请在您的身边检查它在codepen等它正在工作点击这里： - http://codepen.io/ermayankrajput/pen/VPXKdN

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" method="post" id="formID">
      
      input <input type="text">
      
      <input type="submit" value="submit">
      
    </form>
<script>
'use strict';
var form = document.getElementById('formID');
form.addEventListener('submit',function(evt){
  evt.preventDefault();
  evt.stopPropagation();
  alert('hi');
});
</script>

表单提交期间功能不起作用

5 个答案: