6

问题是当我在单选按钮上按下一个键时，元素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
}
4

7 回答 7

3

如果在按键期间触发了 2 个事件，则检查函数中的event.detail属性onClick。如果event.detail = 0那么这意味着鼠标没有点击该元素，我们可以忽略它。 事件细节

于 2016-02-13T15:18:13.410 回答
1

The onclick Event is fired, when the radio button gets selected. Since you select it by pressing a key, both events will get fired. First the onkeypress event and then the onclick event.

于 2010-03-02T13:40:20.843 回答
1

它可以在不求助于总是笨重且缓慢的框架的情况下完成。诀窍是记录在什么时间点发生的事件，然后在此基础上在一个时间范围内工作。当您触发keypress事件时，click事件会立即触发，以下是click事件后触发事件的速度列表keypress...

铬 39.0：0 毫秒

Firefox 31.0 ESR : 18~20ms

IE 11 : 2~4ms

歌剧 12.1：0 毫秒

Chrome 和（真正的）Opera 无需等待，IE 速度相当快，而 Firefox 可以这么说；工作范围（至少在我的系统上）是 0~20 ms。对于仍在使用垃圾计算机的人，我将以编程方式将限制设置为 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');}
}
于 2015-01-19T15:47:32.920 回答
0

you could add a 3rd parameter to your function

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

Now add in a bool to your events...

<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
于 2010-03-02T13:38:27.117 回答
0

我将创建两个单独的处理程序：一个用于单击事件，一个用于按键事件。

然后您的处理程序可以从事件中提取您需要的任何内容并调用具有通用逻辑的第三个函数。

您的 onkeypress 必须忽略空格事件并输入键。我不明白你为什么要听 keypress 事件。你能详细说明一下吗？如果你解释你会做什么，也许我们会更有帮助。

于 2010-03-10T17:46:42.843 回答
0

按键事件是供仅使用键盘的用户激活按钮的，但如果您使用的是按钮，则“单击”应该是唯一需要的事件，因为它在按下空格键时会被触发。如果您在自定义控件上有事件，“key”事件和“click”都可以使用，并且不会一起触发。

于 2017-02-04T19:39:43.530 回答
-1

Use onMouseDown instead of onclick within JavaScript and for consistency add you onKeyPress event here too - taking the event out of the HTML tag.

Sudo Code:

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

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

radioClick()
{
 //code to do stuff
}

Check out jQuery: http://jquery.com/ for the actual code and easy way to write your JavaScript.

于 2010-03-02T13:47:45.090 回答