mouseDown事件處理與主要處理

我的應用程序保持行爲不端干擾。刪除越來越多的代碼後，我設法找到了問題的核心，但這對我來說毫無意義。mouseDown事件處理與主要處理

位背景的。我的網頁編輯器應用程序對鍵擊有反應，例如，當按下Alt時，用於調整大小的處理程序將被隱藏。它也對鼠標操作作出反應，用於拖動，調整大小，刪除，繪製選擇框等。當嘗試使用事件處理程序並防止默認行爲時（我不希望Alt將焦點更改爲瀏覽器菜單，既不用鼠標來選擇文本），我發現了一件奇怪的事情。

當我爲keyup和（並且這些包含preventDefault()）創建事件處理函數時，它工作正常。但是，當我爲mousedown添加處理程序時，它也可以工作，但以前的處理程序停止工作。如果我從mousedown處理程序中刪除preventDefault()，則一切正常。

這裏是我的JS代碼剝離到最小（或者說創造了驗證問題的目的不是別的地方）：

// it works fine with these events 
var events = ['keyup', 'keydown']; 

// but when mousedown is added, its preventDefault() method somehow breaks keydown and keyup 
//var events = ['keyup', 'keydown', 'mousedown']; 

var log = document.getElementById('log'); 

var handler = function(e) { 
    log.innerHTML = e.type + '<br>' + log.innerHTML; 
    e.preventDefault(); 
} 

for (var i = 0; i < events.length; i++) { 
    window.addEventListener(events[i], handler); 
}

見的jsfiddle here。

到底爲什麼在mousedown處理preventDefault()方法與關鍵事件的干擾？

測試在Chrome和Firefox瀏覽器。

來源

2014-07-08 Erlik

新：

我不得不越走越測試。看來，this.focus()作品，以及從我上次更新documen.getElementById().focus()和window.focus()。最佳實踐（IMO）將使用this，因爲它是對點擊對象的通用引用。

最新舊：New Demo

Finaly！我做錯了什麼是使用document對象，而我應該使用window。這次在任何被測試的瀏覽器（甚至IE11）中都沒有任何錯誤。因此，代碼應該是這樣的：

var handler = function(e) { 
    log.innerHTML = e.type + '<br>' + log.innerHTML; 
    document.focus(); 
    e.preventDefault(); 
}

老2：我只是測試這進一步這段時間。看來，e.preventDefault()上mousedown不破壞其它的活動和工作，就像它應該：防止默認操作是（其他人之間）的DOM元素上設置focus。我在本地html文件上嘗試了相同的代碼，它完美地工作。你需要做的是把焦點放在你必須閱讀那些事件的對象上。

編輯：DEMO和handler功能的代碼：

var handler = function(e) { 
    log.innerHTML = e.type + '<br>' + log.innerHTML; 
    document.focus(); 
    e.preventDefault(); 
}

老1：那是因爲mousedown事件持續，直到你 '放過'（嘗試相同的代碼，但使用mouseup代替mousedown）。它只是不起作用，如事件正在發送，結束，然後重複這個事件，直到你停止按下鍵。

來源

2014-07-08 12:44:15 Silveraven

這並不能解釋爲什麼mousedown可以防止關鍵句柄工作，也不能幫助我用'mousedown'解決問題。順便說一句，我沒有抱怨'mousedown'被髮送一次，而'keydown'被重複發送。 – Erlik

經過更長時間的更詳細的測試：更新的答案和更好的解釋。 – Silveraven

好吧，最初我以爲你做了它，但看了一會兒之後，你剛剛做的只是添加一個調用未定義（'document.focus === undefined'），拋出異常（檢查控制檯），並防止'e.preventDefault（）'不被調用。這顯然沒有解決問題。我太快用upvoting :) – Erlik

mouseDown事件處理與主要處理

回答

相關問題