input 沒法獲取焦點

父元素進行拖拽,子元素 input 框沒法獲取焦點,還有一種狀況是定位到拖拽元素的上邊的 input 框也沒法獲取焦點

一、對於點擊事件,是按照 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);
複製代碼
相關文章
相關標籤/搜索