2017-06-15 73 views
0

我正在使用jQuery插件來替換選擇框,如果在按住Enter鍵的同時按住shift鍵的同時選擇某個項目,我想添加一個隱藏的輸入。我的問題是選擇插件監聽器發生在我的keydown監聽器之前。有沒有辦法讓我的第一個on()在我的第二個on()之前執行?或者是否有辦法檢查第二個on()內部是否正在按住Shift鍵?如果我把它放在第二個on()內,e.shiftKey給我undefined。感謝您的想法!檢查運行功能時是否按下換檔鍵?

var shiftHeld = false; 
$(document).on('keydown', function(e) { 
    if(e.which == 13) { 
     shiftHeld = e.shiftKey; 
    } 
}); 

$menu = $('#menu').select2(); 

$menu.on('select2:close', function (e) { 
    if(shiftHeld) { $('#form').append('<input type="hidden" name="shift" value="1" />'); } 
    form.submit(); 
}); 
+0

我想你只是需要一個關鍵的處理程序,所以你可以將shiftHeld設置爲false。按照你目前的邏輯,一旦按下一次,shiftHeld就是真的,並保持這種狀態 – Huangism

+0

@黃色感謝!請在下面查看我對該帖子的評論。 – SeaBass

回答

1

JavaScript中的事件模型從文檔元下降到聚焦元素(捕捉階段),然後再次上升(冒泡階段)。

document ->  element -> document 
------- CAPTURE ------|----- BUBBLING ------ 

您通常會在冒泡階段捕獲事件(目標元素 - >文檔)。看看What is event bubbling and capturing?https://www.quirksmode.org/js/events_order.html

但是,您也可以設置一個偵聽器到捕獲階段,這樣您可以在子項發現事件之前對父元素中的子事件作出反應。

要做到這一點:事件之前到達你的元素

function handleShift(e) { shiftHeld = e.shiftKey } 
document.addEventListener("keydown", handleShift, true); 
document.addEventListener("keyup", handleShift, true); 

該處理器將被調用。請注意最後一個參數「true」,表示您要在捕獲階段設置處理程序。

+0

太棒了!之前觸發!謝謝!你可以在keydown/keyup上用jQuery設置捕獲階段嗎? – SeaBass

+0

嗯我不知道,在舊版本,你不能,也許現在可能,但我沒有使用jquery一段時間 – rupps

0

只需添加KEYUP到您的移檢查,以便轉移被釋放時,shiftHeld值更新:

var shiftHeld = false; 
$(document).on('keydown keyup', function(e) { 
    if(e.which == 13) { 
     shiftHeld = e.shiftKey; 
    } 
}); 

function closeHandler() { 
    if(shiftHeld) { $('#form').append('<input type="hidden" name="shift" value="1" />'); } 
    form.submit(); 
} 

$menu.on('select2:close', setTimeout("closeHandler()",100)); 
+0

謝謝!它仍然不在'if(shiftHeld)'裏面。我認爲問題在於第二個'on()'在第一個之前完成。 – SeaBass

+0

我明白了,給我一秒鐘。 – mjw

+0

嘗試以上方法,如果仍然無法使用,可否請添加警報(shiftHeld);如果(shiftHeld)lin在closeHandler()之前並告訴我顯示了什麼值? – mjw