pageX|pageY、clientX |clientY、offsetX|offsetY的区别
Posted on 2024-03-21 17:47 小白撸代码 阅读(406) 评论(0) 编辑 收藏 举报一、pageX|pageY 当鼠标点击、按下、移动时触发,可获取到该值。
pageX|pageY:以页面左上角为基准点,相对于页面来说的。【当前鼠标触发点,距离页面左上角的距离,不会因为页面的滚动条的改变而改变】
二、clientX |clientY 当鼠标点击、按下、移动时触发,可获取到该值。
clientX |clientY:以浏览器可视区域左上角为基准点,相对于浏览器来说的。【当前鼠标触发点,距离浏览器可视区域左上角的距离,会因为页面的滚动条的改变而改变】
可视区域:指的是浏览器页面可用的地方【不包含tab、前进后退刷新所占用区域、书签】
三、offsetX|offsetY 当鼠标点击、按下、移动时触发,可获取到该值。
offsetX|offsetY:以当前鼠标点击位置的元素左上角为基准点,相对于被操作元素本身来说的【当前鼠标触发点,距离当前元素左上角的距离,不会因为元素本身的滚动条改变而改变】