Question

问题是当我按下单选按钮时，元素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
}

谢谢你的帮助！

Answer 1

选中单选按钮时会触发onclick事件。由于您通过按键选择它，因此两个事件都将被触发。首先是onkeypress事件，然后是onclick事件。

Answer 2

它可以完成而不需要求助于总是笨重而缓慢的框架。诀窍是记录哪个事件发生在什么时间点，然后在一个时间范围内工作。当您触发keypress事件后，会立即触发click事件，此处列出了在click事件后keypress事件被触发的速度... < / p>

Chrome 39.0 ：0ms

Firefox 31.0 ESR ：18~20ms

IE 11 ：2~4ms

Opera 12.1 ：0ms

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');}
}

Answer 3

您可以在函数中添加第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 4

我会创建两个单独的处理程序：一个用于click事件，另一个用于keypress。

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

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

Answer 5

如果在按键期间触发了2个事件，请检查<link href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" rel="stylesheet"/> <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script> <link href="//cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet"> <script src="//cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> <table id="tblId"> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tfoot> <tr> <td>Sum</td> <td>$180</td> </tr> </tfoot> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table>功能中的event.detail属性。如果onClick那么这意味着没有点击该元素的鼠标，我们可以忽略它。 event.detail

Answer 6

关键事件是仅键盘用户激活按钮，但如果您正在使用按钮＆＃34;请单击＆＃34;应该是按下SPACE BAR时被解雇所需的唯一事件。如果您在自定义控件上有活动，请键入＆＃34;事件和＆＃34;点击＆＃34;既可以使用也不会一起发射。

Answer 7

在JavaScript中使用onMouseDown而不是onclick，为了保持一致性，请在此处添加onKeyPress事件 - 将事件从HTML标记中删除。

Sudo Code：

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

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

radioClick()
{
 //code to do stuff
}

查看jQuery：http://jquery.com/了解实际代码和编写JavaScript的简便方法。

Javascript触发两个事件 - onkeypress和onclick

7 个答案: