Javascript 觸發兩個事件 - onkeypress 和 onclick

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

如果在按鍵期間觸發了 2 個事件，則檢查onClick函數中的event.detail屬性。 如果event.detail = 0則意味着鼠標沒有點擊該元素，我們可以忽略它。 事件.細節

Answer 2

當單選按鈕被選中時， onclick事件被觸發。 由於您通過按鍵選擇它，兩個事件都會被觸發。 首先是onkeypress事件，然后是onclick事件。

Answer 3

它可以完成，而無需求助於總是龐大而緩慢的框架。 訣竅是記錄哪個事件發生在哪個時間點，然后在此基礎上在一個時間范圍內工作。 當您觸發keypress事件時， click事件會在之后立即觸發，這里列出了在keypress事件后觸發click事件的速度...

鉻 39.0 ：0 毫秒

火狐 31.0 ESR ：18~20ms

IE 11 ：2~4ms

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

Answer 4

你可以在你的函數中添加第三個參數

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

現在在你的事件中添加一個布爾值......

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

我會創建兩個單獨的處理程序：一個用於單擊事件，另一個用於按鍵事件。

然后您的處理程序可以從事件中提取您需要的任何內容並調用具有公共邏輯的第三個函數。

您的 onkeypress 將不得不忽略空格事件並輸入鍵。 我不明白你為什么要聽按鍵事件。 你能詳細說明一下嗎？ 如果你解釋一下你會做什么，也許我們會更有幫助。

Answer 6

按鍵事件僅用於鍵盤用戶激活按鈕，但如果您使用按鈕，則“單擊”應該是唯一需要的事件，因為它在按下空格鍵時會被觸發。 如果自定義控件上有事件，則可以同時使用“key”事件和“click”事件，並且不會一起觸發。

Answer 7

在 JavaScript 中使用 onMouseDown 而不是 onclick 並且為了保持一致性，在此處也添加 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 的簡單方法。