Javascript запускает два события - onkeypress и onclick

Question

Проблема в том, когда я нажимаю клавишу по радиокнопке, элемент MyFunc запускается дважды - один раз для события «onkeypress», в другое время для события «click».

Вопрос «Почему?» Мне нужно справиться с этим двумя разными способами, но теперь я не могу понять, что такое начальное событие. Когда я нажимаю кнопку мыши, он запускается только для события «click».

<ul> 
    <li> 
     <input type="radio" onkeypress="MyFunc(event, this)" onclick="MyFunc(event, this)" name="myList" id="MyId_1" />Topic 1 
     <input type="radio" onkeypress="MyFunc(event, this)" onclick="MyFunc(event, this)" name="myList" id="MyId_2" />Topic 2 
    </li> 
</ul> 

function MyFunc(e, obj) { 
    alert(e.type); // alerts "keypress" and then "click" 
    // Do my stuff 
} 

Благодарим за помощь!

Answer 1

можно добавить 3-ий параметр вашей функции

function MyFunc(e, obj, click) { 
    if (click) { } // do stuff 
    else { } // do other stuff 
} 

Теперь добавьте в BOOL к вашим событиям ...

<input type="radio" onkeypress="MyFunc(event, this, false)" onclick="MyFunc(event, this, true)" name="myList" id="MyId_1" />Topic 1 
<input type="radio" onkeypress="MyFunc(event, this, false)" onclick="MyFunc(event, this, true)" name="myList" id="MyId_2" />Topic 2 

Answer 2

onclick События вызывается, когда получает радио-кнопка , Поскольку вы выбираете его, нажимая клавишу, оба события будут запущены. Сначала событие onkeypress, а затем событие onclick.

Answer 3

Используйте onMouseDown вместо onclick в JavaScript и для согласованности добавьте также событие onKeyPress - извлечение события из HTML-тега.

Судо Код:

var myRadioButton = document.getElementById('radio'); 

myRadioButton.addListener("radioClick",onMouseDown); 
myRadioButton.addListener("radioKey",onKeyPress); 

radioClick() 
{ 
//code to do stuff 
} 

Заканчивать JQuery: http://jquery.com/ для фактического кода и простой способ, чтобы написать свой JavaScript.

Answer 4

Я бы создал два отдельных обработчика: один для события click и один для их нажатия.

Затем ваши обработчики могут извлечь все необходимое из события и вызвать третью функцию с общей логикой.

Ваш onkeypress должен игнорировать событие для пробела и вводить ключи. Однако я не понимаю, почему вы слушаете событие нажатия клавиши. Не могли бы вы уточнить? Если вы объясните, что вы будете делать, возможно, мы сможем быть более полезными.

Answer 5

Это можно сделать и не прибегать к каркасам, которые всегда громоздки и медленны. Трюк заключается в том, чтобы записать, какое событие произошло в какой момент времени, а затем поверх этого работать в течение периода времени. Когда вы вызываете в keypress Ивентов click событие срабатывает сразу же после этого, вот список того, как быстро click событие срабатывает после keypress события ...

Chrome 39.0: 0ms

Firefox 31,0 СОЭ: 18 ~ 20ms

И.Е. 11: 2 ~ 4ms

Opera 12.1: 0ms

Хром и (настоящая) Opera не ждут, IE достаточно быстр, и Firefox занимает столько времени, чтобы говорить; диапазон работы с (по крайней мере, на моей системе) составляет 0 ~ 20 мс. Программно я установил предел 50 мс для людей, которые все еще используют junky компьютеры, которые слишком заняты 150 бесполезными процессами в фоновом режиме.

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

var option = new function() {this.name = '';} 


window.onclick = function(event) 
{ 
option.clickDate = new Date().getTime(); 
} 


window.onkeypress = function(event) 
{ 
option.keyCode = event.keyCode; 
option.keyCodeDate = new Date().getTime(); 
} 


function MyFunc(e,obj) 
{ 
if (option.keyCodeDate && option.clickDate && 
(
    (option.clickDate - option.keyCodeDate)>=0 && 
    (option.clickDate - option.keyCodeDate)<51) 
{alert('keypress event');} 
else {alert('click event');} 
} 

Answer 6

Если 2 события увольняют во время нажатия клавиши затем проверить event.detail свойство в onClick функции. если event.detail = 0, то это означает, что мышь не была нажата на этот элемент, и мы можем игнорировать его.

Answer 7

Ключевым событием является только для пользователей с клавиатурой, чтобы активировать кнопку, но если вы используете кнопку «щелчок», это должно быть единственное событие, которое необходимо активировать, когда оно срабатывает при нажатии пробела. Если у вас есть события на настраиваемом элементе управления, событие «ключ» и «щелчок» могут использоваться и не срабатывать вместе.