Question

这是全新的。我遇到了类似问题的人，读了一堆答案。我尝试了所有提供的解决方案（使用e.stopPropagation，使用e.stopImmediatePropagation，使用id而不是标签...），但没有任何效果。我通过firebase部署了一个html页面。我直接在html中编写了脚本。这是我的代码：

function onclick(e) {
  /*e.stopPropagation() and e.preventDefault() --YIELDD SAME RESULT*/
  e.stopImmediatePropagation()
  console.log("hello")
}

<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
  <label>Email:</label>
  <input name="email" type="email" placeholder="@">
  <label>New Password:</label>
  <input name="password" type="password">
  <label>Confirm Password:</label>
  <input name="second-password" type="password">
  <button id="submit-button" type="button" onclick="onclick()">Update</button>
</form>
</div>
</body>

所需的行为：点击时，带有ID的按钮会在devtools控制台中记录一条消息。

p.s。我确定我犯了一个基本错误，但我找不到哪个错误。请帮忙！

Answer 1

onclick是公共DOM属性的名称。当具有该名称的函数存在于Global范围中时（如您所愿），它实际上成为window对象的属性，并且可以覆盖Global范围。调用其他回调函数或将其移出Global范围，它将起作用。

此外，您的用例很可能不需要e.stopImmediatePropagation()。

最后，</body>之后除了</html>，什么都不会发生。 <script>和head中允许使用body元素，但在其他地方则不允许。

<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
  <label>Email:</label>
  <input name="email" type="email" placeholder="@">
  <label>New Password:</label>
  <input name="password" type="password">
  <label>Confirm Password:</label>
  <input name="second-password" type="password">
  <button id="submit-button" type="button" onclick="onclick1()">Update</button>
</form>

<script>
  function onclick1(e) {
    console.log("hello")
  }
</script>

现在，由于您只是在学习所有这些内容，因此请确保您以正确的脚下车。糟糕的HTML和JavaScript泛滥成灾，如今仍在使用坏习惯，因为大多数人对此一无所知，因此他们只是复制/粘贴似乎有效的其他人的代码。

首先不要使用内联HTML事件处理程序（onclick，onmouseover等）。将JavaScript与HTML分开，并遵循基于现代标准的代码。有many reasons个不使用内联HTML事件处理程序。而是使用.addEventListener()方法。

接下来，<label>元素是一种语义元素，它以两种方式之一起作用：

它具有一个for属性，该属性的值与表单字段，它是标签“用于”：

<label for="txtFirstName">First Name:</label>
<input id="txtFirstName">

它包含表单字段元素，该元素是以下内容的标签：

<label>First Name: <input id="txtFirstName"></label>

无论哪种情况，您都在告诉客户端label与它作为标签的表单字段之间存在关系。这允许用户单击或触摸标签并激活表单字段。对于那些依靠辅助技术（例如屏幕阅读器）来使用网络的人来说，这也非常有帮助。

因此，将所有这些放在一起，重新编写的代码将如下所示（我仅添加了一些CSS来使页面看起来更整洁，但这不是必需的）：

label { display:block; width:200px; margin-bottom:.5em; }
button { margin-top: 1em; font-size:1.2em; padding:5px; }

<h3>Please update your information below</h3>
<form id="login-form" class="reset-form">
  <label>Email: <input name="email" type="email" placeholder="@"></label>
  <label>New Password: <input name="password" type="password"></label>
  <label>Confirm Password: <input name="second-password" type="password"></label>
  <button id="submit-button" type="button">Update</button>
</form>

<script>
  // get a reference to the DOM element you want to work with
  let btn = document.getElementById("submit-button");
  
  // configure the event handler in JavaScript, not in HTML
  btn.addEventListener("click", logToConsole);
 
  // give your functions meaningful names
  function logToConsole(e) {
    console.log("hello")
  }
</script>

Answer 2

<button id="submit-button" type="button" onclick="onclick()">Update</button>导致无限循环。您将覆盖onclick方法，该方法基本上使您的代码无限制地显示为“当我单击时，请单击我”。

将function onclick()的名称更改为其他名称，例如function hello()，它将起作用。

这是一个可以工作的码本。 https://codepen.io/anon/pen/mzajGd

Answer 3

我认为最好更改您停止的事件，这似乎是表单提交。不确定为什么会遇到范围问题，但这应该可以解决。

<!DOCTYPE html>
<html>
<body>

<form id="login-form" class="reset-form" >
<label>Email:</label>
<input name="email" type="email" placeholder="@">
<label>New Password:</label>
<input name="password" type="password">
<label>Confirm Password:</label>
<input name="second-password" type="password">
<input type="submit">Update</button>
</form>

<script>

document.getElementById("login-form").addEventListener("submit", function(event){
    event.preventDefault();
    alert('boogy');
});

</script>

</body>
</html>

Answer 4

您好，史蒂夫，欢迎来到Stack Overflow。

首先放置您的Button，有几种方法可以完成此操作：

<button class="ui-btn" id="cmdHello">Push Me</button>
<a href="#" class="ui-btn" id="cmdHello2">Yet another Button</a>

现在对它的Click事件做出反应：

<script type="application/javascript">
    $(document).bind("pageinit", function() {
        $(document).on("click", "#cmdHello", function(evt) {
            console.log("Hello World");
        });
    });
</script>

应该可以解决问题。

为什么我的JavaScript函数会导致rangeError？

4 个答案: