在文本輸入中按空格鍵導致父元素滾動而不是輸入值

Question

我目前有一個問題，空格鍵keydown沒有輸入到文本輸入，而是導致父元素滾動（當頁面高度足夠小以至於需要滾動時）。我注意到，當鼠標遠離父元素或頁面高度足夠大以至於不需要滾動時，該值就會正確輸入。

我使用完美scrollbar.js爲滾動的樣式/功能和父容器有一個固定的位置。

任何幫助是非常讚賞:)

jsfiddle

<div id="sidebar"> 
    <div id="sidebar-container"> 
     <div class="smallbox"></div> 
     <input type="text" placeholder="Press a letter and then Spacebar" style="width:270px;"> 
     <div class="largebox"></div> 
    </div> 
</div> 

Answer 1

的perfectScrollbar功能似乎事件處理程序添加到一些關鍵事件。您必須使用e.stopPropagation來防止執行其他事件處理程序。

這裏是DEMO嘗試有或沒有e.stopPropagation()的演示，你會看到區別。

function keydownHandler(e) { 

    //NEW 
    var evt = e ? e : window.event; 
    if (evt.stopPropagation) evt.stopPropagation(); 
    if (evt.cancelBubble!=null) evt.cancelBubble = true; 
    //END 

    switch(String.fromCharCode(e.which)) { 
    case menu.visible.key: 
     if (menu.visible.enable==true && e.shiftKey && e.ctrlKey) 
      sendRequest({action:'visible'}); 
     break; 
    case menu.selected.key: 
     if (menu.selected.enable==true && e.shiftKey && e.ctrlKey) 
      sendRequest({action:'selected'}); 
     break; 
    case menu.entire.key: 
     if (menu.entire.enable==true && e.shiftKey && e.ctrlKey) 
      sendRequest({action:'entire'}); 
     break; 
    } 
}