Кнопка Click события срабатывает при нажатии клавиши Enter на разных входах (без форм)

Эта логика срабатывает при нажатии "Enter" в входе "Сумма", и я не верю, что это нужно (это не в Chrome). Как я могу предотвратить это, и если не предотвратить его в IE, обработайте его так, чтобы логика в событии клика не срабатывала.

<html>
 <body>
   <div id="page">
     <div id="financed_amount">
      <h1>Financed Amount:</h1>
      <input type="text" id="amount" value="" />
     </div>
     <h1>Finance Options</h1>
     <div>
      <a id="shareLink" rel="leanModal" name="email" href="#email"></a>
      <button id="btnShare" class="share">Share this report</button>
     </div>
    </div>
   </body>
</html>

Script

$("#btnShare").click(function (e) {
    // This logic is firing when pressing "Enter" in the "Amount" input
});
  • JQuery: 1.7.2
  • IE 9
  • (Работает в Chrome)

Ответы

Ответ 1

У меня была такая же проблема, и я решил ее добавить, добавив атрибут type="button" к элементу <button>, по которому IE думает, что кнопка является простой кнопкой вместо кнопки отправки (которая является поведением по умолчанию элемента <button>).

Ответ 2

Сегодня я столкнулся с этой проблемой. IE предполагает, что если вы нажмете клавишу ввода в любом из текстовых полей, вы хотите отправить форму - даже если поля не являются частью формы и даже если кнопка не относится к типу "submit".

Вы должны переопределить поведение IE по умолчанию с помощью preventDefault(). В селекторе jQuery поместите в div, который содержит текстовые поля, которые вы хотите игнорировать ключ ввода - в вашем случае - div "page". Вместо того, чтобы выбирать весь div, вы также можете указать текстовые поля, которые вы хотите игнорировать.

$('#page').keypress(function(e) {
    if(e.which == 13) { // Checks for the enter key
        e.preventDefault(); // Stops IE from triggering the button to be clicked
    }
});

Ответ 3

IE считает, что любой элемент button является кнопкой submit (есть ли form или нет). Он также обрабатывает нажатие клавиши Enter в элементе формы как представление неявной формы. Таким образом, поскольку он думает, что вы пытаетесь отправить свою форму, это означает, что она поможет вам и запустить событие click (что, по его мнению,), отправить.

Вы можете прикрепить событие keyup к input или button и проверить ключ Enter (e.which === 13) и return false;

Ответ 4

У меня возникла проблема с ASP.NET WebForms:

<asp:Button />

Это НЕ МОЖЕТ быть разрешено просто добавлением типа = "button", потому что ASP.NET заменяет его на type = "submit" (вы можете видеть это поведение в браузере, если вы проверяете элемент.)

Правильный способ сделать это в asp.net - это добавить

<asp:Button UseSubmitBehavior="false" />

к кнопке. ASP автоматически добавит атрибут type = "button".

Ответ 5

Решение на основе jQuery, которое делает это для каждой кнопки:

 $('button').prop('type', 'button'); // To prevent IE from treating every button as a submit and firing a click() event

Однако событие клика по какой-то причине по-прежнему будет появляться в родительских элементах...