IE bug触发点击2个按钮？

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

以下是我的代码。 在IE中按Enter键会按预期触发提交点击，但由于某种原因也会触发“某个按钮”点击（即使没有我的按键监听器）：

$('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'); }); 

你可以在这里看到bug： http ： //jsfiddle.net/h64xD/

Answer 1

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

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

 Some button 

如果这样做，您会注意到模拟的click事件现在不会触发但仍会触发2个事件。 原因是，因为您没有明确定义

元素，IE9将控件假定为一个表单，因此在文本框中按enter会触发2个事件：

• 你正在效仿的那个
• 默认表单提交按钮行为

所以再次解决这个问题，你必须明确：

 Some button 
  

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

Answer 2

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(); } }); 

Answer 3

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

 $('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; }); 

– 编辑 –

稍微更新以停止事件传播。

Answer 4

首先，当用户按下Enter键时，您不需要手动附加事件来提交表单 – 浏览器已经处理了该事件。

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

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

   Some button 

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

在您的代码中， 元素被假定为文本输入的提交按钮（因为它是隐式表单中的第一个提交按钮）。 因此，只要您在文本输入上按Enter键 ，浏览器就会自然地引发​​相关按钮的单击事件。

如果您重新订购元素，如上所述，我们会看到相反的情况。 IE将其他元素与文本框关联。 并在文本框中按Enter键会隐式提升提交输入上的click事件。

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

 Some Button   

然后进行一些快速比较：

 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'或将其放在预期的提交按钮之后来消除两个按钮之间的歧义。