前端 兼容性事件函数封装总结

function getParentNode(target, element) {
    while (target.tagName.toLowerCase() !== element) {
        target = target.parentNode;
    }
    return target
}


//input  propertchange 
function getViewPortSize() {
    if (document.compatMode === 'CSS1Compat') {
        return {
            width: document.documentElement.clientWidth,
            height: document.documentElement.clientHeight
        }
    }

    return {
        width: document.body.clientWidth,
        height: document.body.clientHeight
    }

    if (window.innerWidth) {
        //window.innerWidth获取当前窗口的宽度(包含滚动条)
        return {
            width: window.innerWidth,
            height: window.innerHeight
        }
    }

}


function getStyles(el, props) {
    if (window.getComputedStyle) {
        if (props) {
            return parseFloat(window.getComputedStyle(el, null)[props])
        }
        return window.getComputedStyle(el, null)
    }

    if (props) {
        return parseFloat(el.currentStyle[props])
    }
    return el.currentStyle

}




function pagePos(e) {
    //这两个属性与offsetWidth、offsetHeight的区别是offset属性包含了边框的宽度.
    let left = getScrollOffset().left,
        top = getScrollOffset().top,
        cLeft = document.documentElement.clientLeft || 0,
        cTop = document.documentElement.clientTop || 0;
    return {
        x: e.clientX + left - cLeft,
        y: e.clientY + top - cTop
    }
}



function prevetDefaultEvent(e) {
    e = e || window.event;
    if (e.preventDefault) {
        e.preventDefault()
    } else {
        e.returnValue = false;
    }
}
function cancelBubble(e) {
    e = e || window.event;
    if (e.stopPropagation) {
        e.stopPropagation()
    } else {
        e.cancelBubble = true;
    }
}

function addEvent(el, type, fn) {
    if (window.addEventListener) {
        el.addEventListener(type, fn, false);
    } else if (el.attachEvent) {
        el.attachEvent('on' + type, function () {
            fn.call(el)
        })
    } else {
        el['on' + type] = fn;
    }
}

function removeEvent(el, type, fn) {
    if (window.removeEventListener) {
        el.removeEventListener(type, fn, false)
    } else if (el.attachEvent) {
        el.detachEvent('on' + type, fn);
    } else {
        el['on' + type] = null;
    }
}



function drag(ele, eleClick) {
    let x,
        y,
        oPos,
        bTime;
    addEvent(ele, 'mousedown', function (e) {
        e = e || window.event;
        bTime = Date.now();
        oPos = [getStyles(ele, 'left'), getStyles(ele, 'top')];
        x = pagePos(e).x - getStyles(ele, 'left');
        y = pagePos(e).y = getStyles(ele, 'top');

        addEvent(ele, 'mousemove', mouseMove);
        addEvent(ele, 'mouseup', mouseUp);
        cancelBubble(e);
        prevetDefaultEvent(e)

    })
    function mouseMove(e) {
        e = e || window.event,
            left = pagePos(e).x - x,
            top = pagePos(e).y - y;

        if (left <= 0) {
            left = 0;
        } else if (left >= wWidth - eleWidht) {
            left = wWidth - eleWidht - 1
        }

        if (top <= 0) {
            top = 0;
        } else if (top >= wHeight - eleHeight) {
            top = wHeight - eleHeight - 1
        }


        ele.style.left = top + 'px';
        ele.style.top = top + 'px';
    }

    function mouseUp(e) {
        e = e || window.event;
        eTime = Date.now();
        if (eTime - bTime < 300) {
            ele.style.left = oPos[0] + 'px';
            ele.style.top = oPos[1] + 'px';
            eleClick && eleClick()
        }
        removeEvent(ele, 'mousemove', mouseMove)
        removeEvent(ele, 'mouseup', mouseUp)
    }


}

function getEleDocPosition(el) {
    let parent = el.offsetParent,
        offsetTop = el.offsetTop,
        offsetLeft = e.offsetLeft;
    while (parent) {
        offsetLeft += parent.offsetLeft
        offsetTop += parent.offsetTop
        parent = parent.offsetLeft
    }
    return {
        left: offsetLeft,
        top: offsetTop
    }
}







function getScrollSize() {
    return {
        scrollWidth: document.body.scrollWidth || document.documentElement.scrollWidth,
        scrollHeight: document.body.scrollHeight || document.documentElement.scrollHeight
    }
}


function getScroll() {
    if (window.pageYOffset) {
        return {
            scrollLeft: window.pageXOffset,
            scrollTop: window.pageYOffset
        }
    }
    return {
        scrollLeft: document.documentElement.scrollLeft || document.body.scrollLeft,
        scrollTop: document.documentElement.scrollTop || document.body.scrollTop
    }
}





function getEleChildren(node) {
    const _arr = [],
        childNodes = node.childNodes,
        len = childNodes.length;
    for (let i = 0; i < len; i++) {
        const child = childNodes[i];
        if (child.nodeType === 1) {
            _arr.push(child)
        }
    }
    return _arr
}

下面-----转载

知识扩展

Javascript、Jquery获取浏览器和屏幕各种高度宽度

Javascript:

alert(document.body.clientWidth);        //网页可见区域宽(body)

alert(document.body.clientHeight);       //网页可见区域高(body)

alert(document.body.offsetWidth);       //网页可见区域宽(body)，包括border、margin等

alert(document.body.offsetHeight);      //网页可见区域宽(body)，包括border、margin等

alert(document.body.scrollWidth);        //网页正文全文宽，包括有滚动条时的未见区域

alert(document.body.scrollHeight);       //网页正文全文高，包括有滚动条时的未见区域

alert(document.body.scrollTop);           //网页被卷去的Top(滚动条)

alert(document.body.scrollLeft);           //网页被卷去的Left(滚动条)

alert(window.screenTop);                     //浏览器距离Top

alert(window.screenLeft);                     //浏览器距离Left

alert(window.screen.height);                //屏幕分辨率的高

alert(window.screen.width);                 //屏幕分辨率的宽

alert(window.screen.availHeight);          //屏幕可用工作区的高

alert(window.screen.availWidth);           //屏幕可用工作区的宽
————————————————
版权声明：本文为CSDN博主「很多水水水水」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_44952727/article/details/89469749