是否可以在更改事件之后立即检测到 onclick 事件

Is it possible to detect an onclick event immediately following an onchange event?

本文关键字：事件 检测 onclick 之后 是否      更新时间：2023-09-26
<!DOCTYPE html> <!-- HTML5 -->
<html>
<head>
<meta charset="UTF-8"> 
</head>
<body>
<p><button type="button" onclick="show()">Show new name</button></p>
<p>Name: <input type="text" onchange="changed()" id ="nm" name="FirstName" value="Mickey"></p>
<p>New name: <span id="sh" ></span></p>
<script>
function show()
{
    var elem = document.getElementById("nm");
    name = elem.value;
    document.getElementById("sh").innerHTML = name;
}
function changed()
{
    alert("Name changed");
}
</script>
</body>
</html>
如果用户键入新名称，

更改焦点，然后单击按钮，则新名称将按预期显示。但是，如果用户更改名称，然后单击按钮而不更改焦点，则不会显示新名称。这是为什么呢？在我的代码中，有几个输入，我想在更改每个输入时处理每个输入，然后在单击按钮时执行更多操作。问题是，除非用户首先进行非直观的鼠标单击或按 Enter 键，否则无法识别按钮单击。有没有办法获得所需的行为？

您的问题是警报。

在元素上检测到一个鼠标按下和一个鼠标向上时，将触发单击事件。

当您按下按钮时，鼠标按下会触发，输入上的模糊会触发 onchange 事件。但它添加了一条警报(在您的光标和按钮之间，因此鼠标向上永远不会在按钮上触发，也不会在点击时触发(。

要避免这种情况，您可以：

  • 删除警报(一切都将正常工作(
  • 在按钮上注册鼠标向下注册，而不是单击。

我不完全明白你想要实现的目标。但是，如果您只想在单击按钮后更改名称，而焦点仍在输入中，只需将"onchange"函数更改为show((

<p><button type="button" onclick="show()">Show new name</button></p>
<p>Name: <input type="text" onchange="show()" id ="nm" name="FirstName" value="Mickey"></p>
<p>New name: <span id="sh" ></span></p>

示例小提琴

正如 m59 所说，内联 JavaScript 从来都不是一个好的做法。

当元素的值已更改时，将发生 onchange 事件，当用户单击元素时，将发生 onclick 事件。

我建议你使用onblur事件。试试这个：

<p>Name: <input type="text" onblur="changed()" id ="nm" name="FirstName" value="Mickey"></p>

当对象失去焦点时，将发生 onblur 事件。

查看此处：演示

相关文章：