2013-08-22 3 views
2

Установка в вопросе может быть проверена и изменена здесь: http://jsfiddle.net/5hAQ8/9/Как событие клавиатуры вызывает событие щелчка на кнопке sibling? (Jsfiddle внутри)

У меня есть небольшая форма (в основном только поле ввода с четкой кнопкой). JavaScript является тривиальным и просто иллюстрирует проблему. В основном это три прослушивателя на входе (keyup), кнопка (нажмите/коснитесь) и форму (отправить). HTML очень прост:

<form> 
    <input> 
    <button>X</button> 
</form> 

X предназначен для очистки поля, но это не главное. Когда кто-то нажимает [enter], даже если вход находится в фокусе, кнопка запускается. Вы можете проверить это самостоятельно в связанном jsfiddle выше.

Как только вы нажмете [enter] внутри формы, вы увидите три предупреждения: один для ввода, один для кнопки, один для формы. Я не могу понять, почему кнопка и форма будут задействованы вообще?

Мое понимание событий DOM было бы событием клавиатуры, происходящим от входа, пузырящимся до документа. Но я принял все меры, чтобы отменить это событие. Поэтому мой вопрос втрое:

  • Почему мероприятие подходит к <button>?
  • Почему кнопка запускает свой прослушиватель (который нажимает и нажимает), даже если это событие является ключом?
  • почему не в preventDefaults/stopPropagations удар в.
+0

Вот только что делать браузеры. Если в форме есть только один вход, вы получите это поведение бесплатно. Это очень полезно для таких вещей, как формы входа в систему. – Pointy

+0

Вход для отправки не является проблемой, если вы имеете в виду это. Моя проблема связана со смешением событий и моей неспособностью отменить те события, которые я не хочу. – amenthes

+0

Кроме того, когда я нажимаю «Enter» в форме, я получаю события от ввода и только кнопки; ничего из формы. Подобно предложению, использование 'console.log()' вместо 'alert()' делает жизнь несколько более приятной. – Pointy

ответ

1

Этот ответ восходит к деталям в комментариях к вопросу. Благодаря Pointy для многих деталей.

почему событие добраться до кнопки и почему нажмите/TAP

форма по умолчанию представить (как это определено в спецификации html5). Видимо, это срабатывает щелчок (чего я не ожидал).

почему не пинки preventDefault в

неявного представления формы срабатывает перед тем KeyUp. Это объясняет, почему у preventDefault нет никаких шансов. Кажется, это не стандартизировано, но каждый проверенный мной браузер сделал это.

Возможные решения

Я думаю, что я пойду с keydown или keypress для KEYCODE == 13 и KeyUp для остальных. Кажется наименее хакерским решением для меня. (предложено ninty9notout, спасибо!)

Это очень хорошо отвечает на вопрос из трех частей. Спасибо всем, кто внес свой вклад.

1

Вы можете исправить проблему, установив type="button" на элемент кнопки. Это позволяет избежать любого поведения по умолчанию в браузере.

Возможные значения: представить ... сброс ..., кнопка: кнопка не имеет поведения по умолчанию. Он может иметь клиентские сценарии, связанные с событиями элемента, запускаемые, когда события происходят

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button

Смежные вопросы