一、對於點擊事件,是按照 mousedown -> mouseup -> click 這個順序走的javascript
二、對於focus 事件, 是按照 mousedown -> focus -> mouseup -> click 順序。 因此在 mousedown 的時候是獲取不到 focus 事件的java
爲了你們能看懂先後的代碼貼出來一些簡單封裝的方法node
// 綁定事件 兼容處理
export const addEvent = (nodeId, eventType, callback) => {
if (nodeId.addEventListener){
nodeId.addEventListener(eventType, callback, false);
}else {
nodeId.attachEvent('on' + eventType, callback);
}
}
// 判斷 event 事件對象 不存在
export const prevent = (event) => {
let e = event || window.event;
if (e.preventDefault) {
e.preventDefault();
}
return e;
}
複製代碼
在使用 mousedowm 事件的時候 有event 事件對象,咱們能經過 event.target 能獲取當前目標對象,若是 enent.target.nodeName 是 INPUT 的時候咱們手動讓input獲取焦點,ui
我實現的功能是拖動父元素讓子元素移動,由於還有縮放功能不能直接添加到元素上由於會縮放的很小shi時候,滾輪和拖拽 都不能獲取到事件了。spa
打個比方: 把拖拽 和 縮放事件放在body 上,可是移動和縮放的是子元素。code
/*拖拽功能*/
export default (nodeId) => {
var oParent = nodeId.parentNode;
addEvent(oParent, 'mousedown', function(ev) {
var oEvent = prevent(ev);
if(oEvent.target.nodeName.toLowerCase() === 'input'){ //若是目標元素是input則跳出滑動事件
oEvent.target.focus()
return;
}
......
// 若是 目標元素是 input 的話 下邊的邏輯就不會處理
})
}
複製代碼
還有一個重點是關於內存消耗的,咱們都知道每當拖動一次就會註冊 一次 mousedowm 事件,這樣就會形成內存的泄露,因此在mouseup 的時候須要刪除事件的這裏就不重點說了。對象
removeEvent(oParent, 'mousemove', startMove);
removeEvent(oParent, 'mouseup', endMove);
複製代碼