JavaScript - 使用名称为“submit（）”的函数时出现奇怪的行为

Question

JavaScript - 使用名称为“submit（）”的函数时出现奇怪的行为

3

submit在Javascript中是一个保留字吗？

看看这段代码：

<html>
  <head>
    <script>
    function sayHello(){
        console.log('Hello!');
    }

    function submit(){
        console.log('Submit!')
    }
    </script>
  </head>
  <body>
    <form>
      <button onclick="sayHello()">Say hello</button>
      <button onclick="submit()">Submit</button>
    </form>

    <button onclick="sayHello()">Say hello - outside</button>
    <button onclick="submit()">Submit - outside</button>
  </body>
</html>

我试图理解为什么我不能在<form>标签内调用submit()函数，但在标签外部可以。我认为这是一个保留字，因为更改函数名称后脚本运行良好，但我找不到有关此问题的任何信息在mdn上。我不是JS专家，所以是否有人能帮助我理解这种奇怪的行为？

- Ema.jar

1

处理程序需要引用。()会立即调用函数。 - zero298

真的吗，为什么是-1？这是我想了解的一个问题。唉 :( - Ema.jar

1

人们喜欢踩踏投票。“你不够了解，但我不会帮忙。” - evolutionxbox

1

@evolutionxbox 更像是“我们讨厌有趣的东西。你知道你的问题在于函数命名不当，所以只需重命名函数。” 话虽如此，既然我现在把这个问题解释为单纯的好奇心，我的评分可能会更温和。尽管下投票按钮说的是“有用”，而不是“有趣”... - John Dvorak

请解释“我无法调用submit()函数”。您是否收到错误提示？如果有，是什么错误？ - zero298

显示剩余2条评论

3个回答

1

在表单中的按钮会自动提交表单，只要该按钮没有事件处理程序或者该事件处理程序没有使用 preventDefault() 方法：

<form>
  <button>Say hello</button>
  <button>Submit</button>
</form>

（看看表单如何被提交 - 片段中的页面消失了）

这与 submit 函数名称无关。

但是，使用内联事件处理程序是不良实践，会导致代码结构不佳、难以管理。强烈建议使用 JavaScript 来附加您的事件，例如：https://developer.mozilla.org/en/DOM/element.addEventListener。

应该像避免使用 eval 一样避免使用内联处理程序。

如果要防止表单中的按钮提交表单，请像这样调用 e.preventDefault()：

function sayHello(){
  console.log('Hello!');
}
function submit(){
  console.log('Submit!')
}
const [b1, b2] = Array.from(document.querySelectorAll('button'));
b1.addEventListener('click', (e) => {
  e.preventDefault();
  sayHello();
});
b2.addEventListener('click', (e) => {
  e.preventDefault();
  submit();
});

<form>
  <button>Say hello</button>
  <button>Submit</button>
</form>

- CertainPerformance

谢谢您的解释，我非常感激 :-) - Ema.jar

0

在表单中按下按钮会重新加载页面。

<html>
  <head>
  </head>
  <body>
    <!--Any button in the form will submit the form and reload the page-->
    <form>
      <button id="btn1">Say hello</button>
      <button id="btn2">Submit</button>
      <button>Anything</button>
    </form>

    <!--these ones don't-->
    <button onclick="sayHello()">Say hello - outside</button>
    <button onclick="submit()">Submit - outside</button>
    <script>
      // notice the page loads when we click the 'anything' button, even without an event handler
      //the delay allows you to see it happening

      console.log("loading page...");
      setTimeout(welcome, 500);

      function welcome() {
        console.log("page has been loaded");
      }

      // adding preventDefault to these, stops the form from submitting
      function sayHello(e) {
          console.log('Hello!');
          e.preventDefault();
      }

      function submit(e) {
          console.log('Submit!')
          e.preventDefault();
      }


      //This is how you add event handlers

      let btn1 = document.getElementById('btn1');
      let btn2 = document.getElementById('btn2');

      btn1.addEventListener('click', sayHello);
      btn2.addEventListener('click', submit);
    </script>
  </body>
</html>

- Graeme Stuart

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Obsidian Age · Accepted Answer

问题在于submit()是一个内置函数，当提交一个<form>时，该函数会被调用。如果需要在提交表单时执行自定义功能，则不仅需要使用不同的函数名称，还需要使用event.preventDefault()来防止默认表单提交，将事件传递到函数中。

下面的示例中可以看到这一点 - 注意，sayHello()将清除屏幕（尝试提交表单），而customSubmit()则不会：

<html>
  <head>
    <script>
    function sayHello(){
        console.log('Hello!');
    }

    function customSubmit(e){
        e.preventDefault();
        console.log('Submit!')
    }
    </script>
  </head>
  <body>
    <form>
      <button onclick="sayHello()">Say hello</button>
      <button onclick="customSubmit(event)">Submit</button>
    </form>

    <button onclick="sayHello()">Say hello - outside</button>
    <button onclick="customSubmit(event)">Submit - outside</button>
  </body>
</html>