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

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

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

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

javascript events onclick dom-events onkeypress
person podeig    schedule 02.03.2010    source источник

Ответы (7)


arrow_upward
3
arrow_downward

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

person pooja sharma    schedule 13.02.2016

arrow_upward
1
arrow_downward

Это можно сделать и не прибегая к фреймворкам, которые всегда громоздки и медленны. Хитрость заключается в том, чтобы записать, какое событие произошло в какой момент времени, а затем работать в пределах временных рамок. Когда вы инициируете событие 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');}
}
person John    schedule 19.01.2015

arrow_upward
1
arrow_downward

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

person Aurril    schedule 02.03.2010
comment
Но как предотвратить это? - person Todd Moses; 02.03.2010
comment
Насколько я знаю, вы не можете предотвратить это поведение. - person Aurril; 02.03.2010
comment
Это очень странно. Какой смысл обрабатывать эти события вместе? :-/ - person podeig; 04.03.2010

arrow_upward
0
arrow_downward

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

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
person hunter    schedule 02.03.2010
comment
Проблема в том, что они стреляют одновременно. Я могу узнать, что было нажато, используя свойство e.type. Он возвращает нажатие клавиши или щелчок. - person podeig; 04.03.2010

arrow_upward
0
arrow_downward

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

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

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

person Juan Mendes    schedule 10.03.2010

arrow_upward
0
arrow_downward

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

person Vincent Young    schedule 04.02.2017

arrow_upward
-1
arrow_downward

Используйте 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.

person Todd Moses    schedule 02.03.2010
comment
Я попробую. Кажется, я пробовал onMouseDown, но у меня работало как OnClick. Возможно, addListener поможет. Скоро вернусь с результатами. - person podeig; 04.03.2010
comment
Я пробовал это решение с помощью jQuery. Это не помогло. OnMouseDown ничего не запускал. Он просто не вызывал мою функцию. Если я использую OnClick с addListener, возникает та же проблема. У меня сейчас нет решения. Есть идеи? - person podeig; 04.03.2010
comment
Здорово, что вы упомянули последовательность, но затем вы взорвали ее, предложив структуру. Если бы я искал эту проблему через Google, эта страница не появилась бы, потому что я -jquery, чтобы найти ответы, а не сбрасывать пропускную способность на пользователей. Пожалуйста, придерживайтесь настоящего JavaScript. - person John; 19.01.2015