如何檢測'Enter'是否觸發了點擊事件？

//... 
<a href="#" id="foo-link">Foo</a> 
<script type="text/javascript"> 

    $('#foo-link').click(function(e) { 
    //... 
    } 

</script> 
//...

一個HTML頁面上使用jQuery，上述定義的click處理程序被執行如何檢測'Enter'是否觸發了點擊事件？

當用戶點擊它，並且當用戶通過標籤導航到它並且擊中
輸入

（至少在Firefox中）似乎沒有差異傳遞給處理程序的點擊事件之間 - 原始鍵事件「神奇地」轉化爲點擊事件。

有沒有辦法區分這兩種情況？

爲了給出更多的細節，爲什麼我需要以不同的方式處理這兩種情況：在我的特殊情況下，點擊處理程序將焦點設置爲文本輸入字段。此文本輸入字段已註冊一個keyup事件處理程序，用於發送AJAX請求。當用戶在鏈接上點擊輸入後觸發點擊處理程序時，現在焦點文本輸入字段將收到keyup事件，並且AJAX請求被錯誤地發送。

來源

2013-10-08 rmoestl

不知道這是可能的，但你可以用'event.keyCode'檢查一個密鑰已經被使用的點擊處理程序？ – Nunners

那麼在你描述的場景中，輸入字段仍然是空的？那麼爲什麼不檢查_that_，並且在這種情況下不要發出AJAX請求？ – CBroe

不，你不能區分，在兩種情況下引發的事件都是一個MouseEvent。您應該爲輸入密鑰附加另一個偵聽器，並在該情況下阻止其他偵聽器 –

我和我的腳本有類似之處。但我最終使用.keyup而不是點擊。它允許我檢查哪個按鈕被點擊。

 $("#searching").keyup(function() { 
     if (window.event.keyCode == 38 || window.event.keyCode == 40 || window.event.keyCode == 32) { 
      return false; 
     } 
     var mystring = document.getElementById('searching').value; 
     if (timeoutReference) clearTimeout(timeoutReference); 
     if (!mystring.match(/\S/)) { 

      $.ajax({ 
        //Rest of code here..

來源

2013-10-08 10:13:05 Moelbeck

一種解決辦法是處理，而不是點擊「鼠標鬆開」：

<a href="javascript:;" id="foo-link">Foo</a> 
<script type="text/javascript"> 

     $('#foo-link').mouseup(function (e) { 
       alert("Mouse click"); 
     }); 

</script>

另一個解決方案是同時處理「點擊」和「按鍵」，並返回false如果按下「ENTER」：

<a href="javascript:;" id="foo-link">Foo</a> 
<script type="text/javascript"> 

    $('#foo-link').click(function (e) { 
     alert("Mouse click"); 
    }); 

    $('#foo-link').keypress(function (e) { 
     if (e.which == 13) 
      return false; 
    }); 

</script>

來源

2013-10-08 10:15:47 iTURTEV

@第二種解決方案：在'keypress'事件上返回'false'並不會阻止** separate **'keyup'事件發生，對吧？ – rmoestl

不，但它可以防止發生'click'事件。 – iTURTEV

只有在OP同意他希望在輸入時禁止點擊事件的情況下。一般來說，可達性很大。 –

使outline:0爲您的鏈接。現在，用戶無法在鏈接上看到輪廓。所以，他不知道他打開了哪個按鈕，所以他不會點擊輸入鍵，但focus將會出現在該元素上，如果他按下輸入鍵，那麼您的其他事情就會執行您的操作。即使不設置outline:0，代碼仍然有效，因爲重點在於它。

來源

2013-10-08 10:15:51 Mirage

這應該工作

$('#foo-link').keyup(function(e) { 
     if(e.which == 13) 
      console.log('Enter is pressed'); 
});

來源

2013-10-08 10:16:19 Igerko

可能有點長的方法來處理這個問題，但工作： http://jsbin.com/azATuHe/3（檢查的console.log）

$('.txtB').on('keyup', function(e){ 
    if ($('#anSetF').data('enterpressed') == true) { 
     console.log ('keyup triggered on TEXTBOX but suppressed'); 
     $('#anSetF').data('enterpressed', false) 
     return true; 
    }else{ 
    console.log ('keyup triggered on TEXTBOX Fire AJAX now : ' + $('#anSetF').data('enterpressed')); 
    //Existing code to fire AJAX 
    } 


    }); 

$('#anSetF').on('keydown.Enter', function(e){ 
    console.log('KEY UP: ' + e.which); 
    if (e.which == 13){ 
     $(this).data('enterpressed',true); 
    } 
    }).on('click', function(){ 
     //Some code which you used to focus the textbox 
     $('.txtB').focus(); 
    });

來源

2013-10-08 10:44:27

是否有區分的方式這兩種情況之間呢？

是的，有（至少在鉻）：

$('#foo-link').click(function(event) { 
    if (event.originalEvent.detail === 0) { 
     // keyboard "click" event 
    } else { 
     // mouse "click" event 
    } 
}

您可以檢查原始事件的詳細屬性來獲取點擊次數。如果點擊次數爲0，則知道「點擊」來自鍵盤。如果點擊次數大於0，則您知道「點擊」來自鼠標。

參考：https://developer.mozilla.org/en-US/docs/Web/API/UIEvent/detail

來源

2017-06-29 18:19:33

如何檢測'Enter'是否觸發了點擊事件？

回答

相關問題