IE 错误触发器单击以 2 个按钮

IE bug triggers click for 2 buttons?

本文关键字：按钮 单击 错误 触发器 IE      更新时间：2023-09-26

我正在尝试在用户按回车键时触发提交按钮。适用于除Internet Explorer 9以外的所有浏览器。奇怪的是，IE坚持还触发另一个按钮的点击，我从未告诉过它。我做错了什么或如何解决这个问题？

下面是我的代码。在IE中按回车键会按预期触发提交单击，但由于某种原因也会触发"某些按钮"单击（即使没有我的按键侦听器）：

$('input[type=submit]').click(function () {
    alert('Submit click');
});
//SIMULATE CLICK IF ENTER PRESSED IN SEARCH
$('input[type=text]').keypress(function (event) {
    var keycode = event.keyCode || event.which;
    if (keycode == 13) $('input[type=submit]').click();
});
//ROUTE CLEAR HANDLER
$('button').click(function () {
    alert('Button click');
});

您可以在此处看到该错误的实际操作：http://jsfiddle.net/h64xD/

以下是需要考虑的几件事：

默认情况下，IE9 将<button/>元素计为type="submit"。因此，要使其不提交，您必须明确：

<button type="button">Some button</button>

如果这样做，您会注意到模拟的 click 事件现在不会触发<button/>但仍会触发 2 个事件。原因是，由于您尚未显式定义 <form/> 元素，IE9 假定控件位于窗体中，因此按文本框中的 enter 会触发 2 个事件：

  • 您正在模拟的那个
  • 默认表单提交按钮行为

因此，要再次解决此问题，您必须明确：

<button type="button">Some button</button>
<form><input type="text" /></form>
<input type="submit" value="Submit" />

现在，这些是您在IE中看到行为的原因。 @MrSlayer的回答迎合了第二个问题，即在您满意地处理keypress事件后停止它，使用preventDefault()

Enter 键具有要提交的默认行为，因此您需要阻止执行默认行为。 因为默认情况下，button 标记是type="submit"，所以当按下 Enter 键时，它正在执行该按钮。

//SIMULATE CLICK IF ENTER PRESSED IN SEARCH
$('input[type=text]').keypress(function (event) {
    var keycode = event.keyCode || event.which;
    if (keycode == 13)
    {
        event.preventDefault();
        $('input[type=submit]').click();
    }
});

如何触发表单的提交而不是单击按钮？

$('input[type=text]').keypress(function(e) {
     var keycode = event.keyCode || event.which,
         frm = $(this).closest('form');
     if (keycode == 13) {
          e.stopPropagation();
          frm.submit();
          return false;
     }
     return true;
});

--编辑--

略有更新以停止事件传播。

首先，当用户按回车键时，您无需手动附加事件即可提交表单 - 浏览器已经处理了该事件。

奇怪的是，这与元素的顺序、隐式表单关联以及 IE 将按钮作为提交元素处理的事实有关。

尝试交换这些按钮的顺序，看看我的意思：

<input type="text" />
<input type="submit" value="Submit" />
<button>Some button</button>

当然，浏览器已经被指示侦听以响应文本输入上的 Enter。这会导致浏览器单击关联的提交按钮。此外，由于您没有明确提供form，或通过其form属性相互关联的元素，因此浏览器正在尝试为您建立这种关系。

在您的代码中，假定 <button> 元素是文本输入的提交按钮（因为它是隐式表单中的第一个提交按钮）。因此，每当在文本输入上按 Enter 时，浏览器都会自然引发关联按钮的单击事件。

如果你重新排序元素，就像我上面所说的那样，我们看到相反的情况发生。IE 将另一个<input>元素与文本框相关联。在文本框上按 Enter 会隐式引发提交输入上的单击事件。

您可以通过比较各种元素的.form属性来确认此行为。例如，添加一些id值将使我们能够更轻松地访问这些值：

<button id="fiz">Some Button</button>
<input  id="foo" type="text" />
<input  id="bar" type="submit" value="Submit" />

然后运行一些快速比较：

var button = document.getElementById("fiz"); 
var text = document.getElementById("foo"); 
var submit = document.getElementById("bar"); 
button.form === text.form;   // true 
submit.form === text.form;   // true 
button.form === submit.form; // true

因此，最后，您可以通过声明要type='button' <button>元素或将其放在预期的提交按钮之后来消除两个按钮之间的歧义。

相关文章：