此JavaScript代碼是否會通過禁用一個鍵來影響其他按鍵事件？

我正在使用它來禁用空格鍵在瀏覽器中的'滾動'效果。這也會影響其他按鍵事件嗎？此JavaScript代碼是否會通過禁用一個鍵來影響其他按鍵事件？

window.onkeydown = function(e) { 
    return !(e.keyCode == 32); 
};

請問有人能解釋一下這是幹什麼的？我不確定這段代碼是否壞，但它似乎禁用了我的頁面中的其他按鍵相關的代碼，我想確保這不是原因。

謝謝！

來源

2012-05-19 d-_-b

覆蓋輸入字段將不會反映空格鍵事件「我不知道如果我的代碼是壞的」，「我不是太確定它究竟做了什麼「---如果你不寫它，怎麼可能調用」你的「代碼？ – zerkms

ASCII代碼32是代表空格鍵的ASCII值，而且您的代碼基本上會告訴瀏覽器在檢測到鍵碼時返回false。由於返回false，所以您所說的滾動條效果實際上已成功禁用。

但是，這種方便的空格鍵滾動禁用功能的不幸副作用是它禁用了頁面上任何地方的空格鍵按鍵。

如果檢測到鍵碼，則不會返回false，而是將當前的scrollTop值傳遞給一個閉包，該閉包將函數返回給setTimeout事件。當setTimeout觸發時，scrollTop位置將重置爲setTimeout事件首次註冊時的值。

window.onkeydown = function(e) { 
    if(event.keyCode == 32) { // alert($(document).scrollTop()); 
     setTimeout(     
      (function(scrollval) { 
       return function() { 
        $(document).scrollTop(scrollval); 
       }; 
      })($(document).scrollTop()), 0); 
    } 
};

您的用戶仍然可以方便地利用輸入文本框和文本域spacebars的，並在同一時間，按下空格鍵，而不是集中在一個文本元素將不再導致頁面滾動。

在引擎蓋下，滾動仍在發生。它只是以足夠快的速度重置到用戶不注意的位置。

如果你將這個值增加到100或1000，它會給你一個更好的想法。你會看到頁面滾動，然後設置回上一個滾動位置。

這隻在Chrome和Firefox 13中測試！因此，您可能必須將setTimeout持續時間（當前爲0）調整爲Internet Explorer等瀏覽器中的不同值。如有必要，請準備妥善降級 - 僅在現代瀏覽器中支持此功能。

UPDATE：

僅供參考，下面是使用使在主流瀏覽器兼容這種方法。它已經過Chrome，Firefox，IE8，IE9和Safari的測試。

雖然它在IE8/IE9中工作，但不是很流暢。

// put the eventhandler in a named function so it can be easily assigned 
    // to other events. 
function noScrollEvent(e) { 
    e = e || window.event; 
    if(e.keyCode == 32) { 
     setTimeout(     
      (function(scrollval) { 
       return function() { 
        $(document).scrollTop(scrollval); 
       }; 
      })($(document).scrollTop()), 0); 
    } 
} 


// Chrome and Firefox must use onkeydown 
window.onkeydown = noScrollEvent; 

// Internet Explorer 8 and 9 and Safari must use onkeypress 
window.document.onkeypress = noScrollEvent;

來源

2012-05-19 00:43:58 jmort253

這是一個答案！謝謝你，完美！作爲一個側面說明，因爲Internet Explorer不喜歡玩好，我不喜歡爲我的網站工作lol ... –

我在Linux上，和IE沒有一個很好的開發人員像Firebug或Chrome開發工具這樣的控制檯:)它可能會工作，因爲jQuery通常與IE瀏覽器很好。我只是想透露一下，因爲我喜歡徹底，所以沒有在那裏測試。 :)隨時更新我，如果它真的有用，我有興趣知道！祝你好運！ :) – jmort253

是的，jQuery的驚人似乎功能始終貫穿各瀏覽器，反正比CSS好。這實際上在鉻，FF的工作，但沒有IE ...沒有什麼大不了的，我只是爲我的網站添加一個額外的功能。無論IE的奇怪，你的回答肯定會有所幫助。再次感謝！ –

如果其他元素綁定到keydown事件不會通過這個代碼

來實現見我的小提琴，並嘗試添加和刪除textarea的聽keydown事件

window.onkeydown = function(e) { 
    return !(e.keyCode == 32); 
}; 

document.getElementsByTagName("textarea")[0].onkeydown = function(e) { 
    alert("hi"); 
}

http://jsfiddle.net/HnD4Y/

來源

2012-05-19 00:25:44 Trevor

感謝您的迴應，但是當我按下空格時，這仍然會發出警報：/ –

對，這就是我所說的。我想我沒有直接理解你的問題。 – Trevor

上面用的setTimeout沒有爲我的0延遲隨着50ms以上撞到延遲在所有的工作對丁目的答案，它開始工作，但造成了顯着的頁面跳轉。我相信setTimeout過早地滾動頁面，然後Chrome會在稍後移動頁面。

下面是我的解決方案，運行良好。它在keydown事件上返回false以防止瀏覽器進行分頁。然後你確定你設置的按鈕等事件來代替使用keyup事件。

$(mySelector).keyup(eventHandlerFunction); 

[dom element].onkeydown = function(event) { 
    if (event.keyCode == 32) {return false;} 
};

注：如果他們或他們的父母被這個onkeydown事件處理程序

來源

2013-03-19 01:04:23

此JavaScript代碼是否會通過禁用一個鍵來影響其他按鍵事件？

回答

相關問題