javascript 原生JS获取屏幕宽高，距离

Posted 2021-05-03

// 获取屏幕滚动的距离
function getScrollOffset() {
    // w3c标准都支持
    if (window.pageXOffset) {
        return {
            x: window.pageXOffset,
            y: window.pageYOffset
        }
    } else {
        // 在ie9以下 仅支持一种方法
        return {
            x: document.body.scrollLeft || document.documentElement.scrollLeft,
            y: document.body.scrollTop || document.documentElement.scrollTop,
        }
    }
}

// CSS1Compat  浏览器标准模式
// BackCompat  浏览器怪异模式、ie向后兼容
// 获取视口的宽高(视口：HTML可以展现的大小，不包括导航条、控制台等)
function getViewportOffset() {
    // ie8以上
    if (window.innerWidth) {
        return {
            w: window.innerWidth,
            h: window.innerHeight
        }
    } else {
        // 标准模式
        if (document.compatMode == 'BackCompat') {
            return {
                w: document.body.clientWidth,
                h: document.body.clientHeight
            }
        } else {
            // 怪异模式
            return {
                w: document.documentElement.clientWidth,
                h: document.documentElement.clientHeight
            }
        }
    }
}

// 获取元素尺寸(实时的)
// getBoundingClientRect()虽然也返回dom信息，但获取不是实时宽高
function getEleRect(ele) {
    return {
        w: ele.offsetWidth,
        h: ele.offsetHeight
    }
}

// 获取元素位置
// 对于无定位父级的元素，返回相对document的距离。对于有定位的元素(relative, absolute....),返回和这个父元素之间的距离
function getEleOffset(ele) {
    return {
        x: ele.offsetLeft,
        y: ele.offsetTop
    }
}

// 获取元素样式，只能获取行间样式，通过<style></style>定义的样式获取不到
dom.style['xxx']

// 获取元素计算后得到的显示样式(只读)，
function getComputedStyle(dom, prop) {
    if (window.getComputedStyle) {
        // 更准确且都是转成px后的值
        return window.getComputedStyle(dom, null)[prop]
    } else {
        return dom.currentStyle[prop]
    }
}

// 添加事件绑定
// addEventListener 和 onclick等 事件 this指向自身
function addEvent(ele, type, handle) {
    if (ele.addEventListener) {
        ele.addEventListener(type, handle, false)
    } else if (ele.attachEvent) {

        ele.attachEvent('on' + type, function() {
            handle.call(ele)
        })
    } else {
        // 兼容性最好
        ele['on' + type] = handle
    }
}

// 解除绑定
// 若绑定匿名函数，则无法解绑
ele.onclick = null

ele.removeEventListener(type, fn, false)

ele.detachEvent('on' + type, fn)


// 阻止冒泡事件
function stopBubble(event) {
    if (event.stopPropagation) {
        event.stopPropagation()
    } else {
        // IE 阻止冒泡
        event.cancelBubble = true
    }
}

// 事件捕获只有chrome实现了

// 取消默认事件
function cancelDefault(event) {
    if (event.preventDefault) {
        event.preventDefault()
    } else {
        event.returnValue = false
    }
}

// 获取事件源对象
function getEventSrcElement(event) {
    // window.event是IE的写法
    let e = event || window.event
        // target:火狐、   srcElement:IE、  chrome两者都有
    let target = event.target || event.srcElement
    return target
}

// 监听鼠标右键
// 能监听鼠标右键的只有 mousedown, mouseup 事件
document.onmousedown = function(event) {
    let e = event || window.event
    let code = e.button
    if (code == 2) {
        console.log('右键')
    } else if (code == 0) {
        console.log('左键')
    } else {
        console.log('其他键')
    }
}

// 鼠标点击书序： mousedown => mouseup => click

// 键盘按下事件: keydown => keypress => keyup
// keydown 可以响应任何键盘按键
// keypress 只能响应字符类键盘按键，但它可以返回ASCII, 可以转换成相应字符
// 用 String.fromCharCode()

function a() {
    function b() {
        var bbb = 123
        console.log(aaa)
    }
    var aaa = 456
    return b
}
var demo = a()
demo()