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

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

5 голосов
/ 02 марта 2010

Проблема в том, что когда я нажимаю клавишу над переключателем, элемент MyFunc срабатывает дважды - один раз для события «onkeypress», другой раз для события «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
}

Спасибо за помощь!

Ответы [ 7 ]

1 голос
/ 13 февраля 2016

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

1 голос
/ 19 января 2015

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

Chrome 39,0 : 0 мс

Firefox 31.0 ESR : 18 ~ 20 мс

IE 11 : 2 ~ 4 мс

Опера 12,1 : 0 мс

Chrome и (настоящая) Opera не ждут, IE работает достаточно быстро, а Firefox так сказать; диапазон для работы (по крайней мере, в моей системе) составляет 0 ~ 20 мс. Программно я установлю ограничение в 50 мс для людей, все еще использующих ненужные компьютеры, которые слишком заняты 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');}
}
1 голос
/ 02 марта 2010

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

0 голосов
/ 04 февраля 2017

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

0 голосов
/ 10 марта 2010

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

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

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

0 голосов
/ 02 марта 2010

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

Код Sudo: 

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

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

radioClick()
{
 //code to do stuff
}

Проверьте jQuery: http://jquery.com/ для реального кода и простой способ написать свой JavaScript.

0 голосов
/ 02 марта 2010

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

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
...