滚动到最最上部按键



一 前言

(一) window对象

在前端开发中总会遇到各种各样需要使用或计算坐标和距离的情况,但是这些属性和方法众多,全部熟练地记下来并非是一件易事,大多只能现查,耗费不少时间精力,于是便有了整理记录的想法,即加深了印象,又方便随时查阅。

(1) 概述

在浏览器中,window对象(注意,w为小写)指当前的浏览器窗口。它也是所有对象的顶层对象。

  • window对象,w是小写
  • window对象,是所以对象的顶层对象
  • 顶层对象:指的是最高一层的对象,所有其他对象都是它的下属。
  • JavaScript规定,浏览器环境的所有全局变量,都是window对象的属性。

全局变量,window对象属性


var a = 1;
window.a // 1


上面代码中,变量a是一个全局变量,但是实质上它是window对象的属性。

声明一个全局变量,就是为window对象的同名属性赋值。



二 window 对象

(2) window对象的属性

浏览器里面,window
对象指当前的浏览器窗口。它也是当前页面的顶层对象,即最高一层的对象,所有其他对象都是它的下属。一个变量如果未声明,那么默认就是顶层对象的属性。摘自《阮一峰
JavaScript 教程》

(1) window.window

window对象的window属性指向自身。

window.window === this // true

位置大小属性

(2) window.name

window.name属性用于设置当前浏览器窗口的名字。

  • 与<iframe>窗口通信时,非常有用。

window.screenX , window.screenY

(3) window.location

window.location返回一个location对象,用于获取窗口当前的URL信息。它等同于document.location对象

  • window.location返回一个 location 对象
  • location对象包含了当前窗口的 URL 信息

window.location === document.location // true

澳门十大电子游戏平台 1

window.location对象 = document.location对象

返回浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离。

(4) window.closed

澳门十大电子游戏平台,window.closed属性返回一个布尔值,表示窗口是否关闭。

  • window.closed 这个属性一般用来检查,使用脚本打开的新窗口是否关闭。

var x = window.open();

x.closed    // false

if (x != null && !x.closed ){
    console.log('如果不等于null并且没有关闭,则输出窗口仍然打开着')
} 

window.innerHeight , window.innerWidth

(5) window.opener

window.opener属性返回打开当前窗口的父窗口。如果当前窗口没有父窗口,则返回null。

  • window.opener属性 返回打开当前窗口的父窗口
  • 通过opener属性,可以获得父窗口的的全局变量和方法

返回网页在当前窗口中可见区域的高度和宽度,即「视口」。

(6) window.screenX属性,window.screenY属性

  • window.screenX,返回浏览器窗口左上角相对于当前屏幕左上角((0,
    0))的水平距离
  • window.screenY,返回浏览器窗口左上角相对于当前屏幕左上角((0,
    0))的垂直距离

注意,这两个属性包括滚动条的高度和宽度。

(7) window.innerHeight,window.innerWidth

  • window.innerHeight属性,返回 ( 网页 ) 在当前窗口中可见部分的 (
    高度 )
    ,即“视口”(viewport),单位为像素
  • window.innerWidth属性, 返回 ( 网页 ) 在当前窗口中可见部分的 (
    宽度 )
    ,即“视口”(viewport),单位为像素
  • 注意,这两个属性值包括滚动条的高度和宽度。

window.outerHeight , window.outerWidth

(8) window.outerHeight,window.outerWidth

  • window.outerHeight属性返回 ( 浏览器窗口的高度
    )
    ,包括浏览器菜单和边框,单位为像素。
  • window.outerWidth属性 返回 ( 浏览器窗口的宽度
    )
    ,包括浏览器菜单和边框,单位为像素。

返回浏览器窗口的高度和宽度,包括浏览器菜单和边框。

(9) window.pageXOffset,window.pageYOffset

  • ( 注意 ):—————————-是只读属性
  • 因为是只读,所以不带参数。
  • window.pageXOffset属性返回页面的水平滚动距离,单位都为像素。
  • window.pageYOffset属性返回页面的垂直滚动距离,单位都为像素。
  • 如果用户向下拉动了垂直滚动条75像素,那么window.pageYOffset就是75。用户水平向右拉动水平滚动条200像素,window.pageXOffset就是200。
![](https://upload-images.jianshu.io/upload_images/6493119-a22520e4ab3307ac.png)

window.innerWidth,window.outerWidth,window.screenX,window.pageXOffset



window.scrollX , window.scrollY

(3) window对象的方法

别名: window.pageXOffset , window.pageYOffset

(1) window.scrollTo()——–滚动到

window.scrollTo方法用于将网页 ( 滚动到 ) 文档中的某个坐标。

  • 它的参数是相对于整张网页的横坐标和纵坐标。
  • window.scrollTo(x-coord,y-coord )滚动到文档中的某个坐标。
  • x-coord 是文档中的横轴坐标。
  • y-coord 是文档中的纵轴坐标。
  • 该函数和 window.scroll是一样的。

分别返回页面的水平滚动距离和垂直滚动距离,单位都是像素。

(2) window.scrollBy()——–滚动了,有正负

window.scrollBy方法用于将网页移动指定距离,单位为像素。它接受两个参数:向右滚动的像素,向下滚动的像素。

  • 注意参数有正负 (
    例如:window.scrollBy(-10,-10)表示上移动10px,向左移动10px )

注意,这两个属性的返回值不是整数,而是双精度浮点数。如果页面没有滚动,它们的值就是0。

摘自《阮一峰 JavaScript 教程》

为了跨浏览器兼容性,请使用 window.pageXOffset 代替
window.scrollX。另外,旧版本的
IE两个属性都不支持,必须通过其他的非标准属性来解决此问题。

摘自 MDN

(3) window.open()

window.open方法用于新建另一个浏览器窗口,并且返回该窗口对象。

  • open方法一共可以接受四个参数。
  • 第一个参数:字符串,表示新窗口的网址。如果省略,默认网址就是about:blank。
  • 第二个参数:字符串,表示新窗口的名字。如果该名字的窗口已经存在,则跳到该窗口,不再新建窗口。如果省略,就默认使用_blank,表示新建一个没有名字的窗口。
  • 第三个参数:字符串,内容为逗号分隔的键值对,表示新窗口的参数,比如有没有提示栏、工具条等等。如果省略,则默认打开一个完整UI的新窗口。
  • 第四个参数:布尔值,表示第一个参数指定的网址,是否应该替换history对象之中的当前网址记录,默认值为false。显然,这个参数只有在第二个参数指向已经存在的窗口时,才有意义

window.open('baidu.html');

// http://localhost:3000/baidu.html

上面代码会让浏览器弹出一个新建窗口,网址是当前域名下的baidu.html。



--------------------------------------------

var popup = window.open(
  'somepage.html',
  'DefinitionsWindows',
  'height=200,width=200,location=no,status=yes,resizable=yes,scrollbars=yes'
);


上面代码表示,打开的新窗口高度和宽度都为200像素,没有地址栏,有状态栏,允许用户调整大小,有滚动条

window 对象的方法

(4) window.close()

window.close方法用于关闭当前窗口,一般用来关闭window.open方法新建的窗口。

  • 该方法只对顶层窗口有效,iframe框架之中的窗口使用该方法无效。

var a = window.open('baidu.html','baidu');

a.close()

//关闭a窗口








window.scrollTo , window.scrollBy()

(二) element对象盒模型属性

window.scrollTo 方法 —> 别名: window.scroll 方法

(1) Element.clientHeight,Element.clientWidth

用于将文档滚动到指定位置。

——————-可见部分宽高度——————-

它接受两个参数,表示滚动后位于窗口左上角的页面坐标。

——–Element.clientHeight——–只包括padding

也可以接受一个配置对象作为参数。

——–Element.offsetHeight——–包括padding,border,滚动条
  • Element.clientHeight属性返回元素节点 (可见部分的高度 )
  • Element.clientWidth 属性返回元素节点 (可见部分的宽度 )
  • 这两个属性可以计算得到,等于元素的CSS高度(或宽度)加上CSS的Padding,减去滚动条(如果存在)。
  • 对于整张网页来说,当前可见高度(即视口高度)要从document.documentElement对象(即<html>节点)上获取,等同于window.innerHeight属性减去水平滚动条的高度。没有滚动条时,这两个值是相等的;有滚动条时,前者小于后者。
    document.documentElement.clientHeight === window.innerHeight - 水平滚动条的高度
  • 所谓“可见部分”,指的是不包括溢出(overflow)的大小,只返回该元素在容器中占据的大小,对于有滚动条的元素来说,它们等于滚动条围起来的区域大小。这两个属性的值包括Padding、但不包括滚动条、边框和Margin,单位为像素。

var rootElement = document.documentElement;

// 没有水平滚动条时
rootElement.clientHeight === window.innerHeight // true

// 没有垂直滚动条时
rootElement.clientWidth === window.innerWidth // true

window.scrollTo

(2) Element.clientLeft,Element.clientTop

配置对象 options 有三个属性。

—————–边框的宽高度——————-

  • Element.clientLeft属性等于元素节点 左边框(left
    border)的宽度,单位为像素。
  • Element.clientTop属性等于元素节点 顶部边框 的高度,单位为像素。
  • 注意:如果元素的显示设为display:
    inline,它的clientLeft属性一律为0,不管是否存在左边框。

top:滚动后页面左上角的垂直坐标,即 y 坐标。
left:滚动后页面左上角的水平坐标,即 x 坐标。
behavior:字符串,表示滚动的方式,有三个可能值,默认值为 auto。

(3) Element.scrollHeight,Element.scrollWidth

window.scrollBy 方法用于将网页滚动指定距离。

——————-总的宽高度——————-

它接受两个参数:水平向右滚动的像素,垂直向下滚动的像素。

————————-不包括边框和滚动条————————-
  • Element.scrollHeight属性返回某个网页元素的 ( 总高度 )
  • Element.scrollWidth 属性返回某个网页元素的 ( 总宽度 )
  • 它们返回的是整个元素的高度或宽度,包括由于存在滚动条而不可见的部分。
  • 可以理解成元素在垂直和水平两个方向上可以滚动的距离。它们都包括由于溢出容器而无法显示在网页上的那部分高度或宽度。这两个属性是只读属性。
    整张网页的总高度可以从document.documentElement或document.body上读取。
  • 如果内容正好适合它的容器,没有溢出,那么Element.scrollHeight和Element.clientHeight是相等的,scrollWidth属性与clientWidth属性是相等的。如果存在溢出,那么scrollHeight属性大于clientHeight属性,scrollWidth属性大于clientWidth属性。

element.scrollHeight - element.scrollTop === element.clientHeight


存在溢出时,当滚动条滚动到内容底部时,下面的表达式为true

如果滚动条没有滚动到内容底部,上面的表达式为false。



---------------------------------------------------

这个特性结合onscroll事件,可以判断用户是否滚动到了指定元素的底部,

比如向用户展示某个内容区块时,判断用户是否滚动到了区块的底部。

注意:仔细体会这两者的差别。

(4) Element.scrollLeft,Element.scrollTop

三 Element 节点

——-scrollTop顶部到最顶部的距离——可读写——

  • Element.scrollLeft属性表示网页元素的水平滚动条向右侧滚动的像素数量。
  • Element.scrollTop属性表示网页元素的垂直滚动条向下滚动的像素数量。
  • 这两个属性都可读写,设置该属性的值,会导致浏览器将指定元素自动滚动到相应的位置。
    一个元素的 scrollTop 值是这个元素的顶部到它的最顶部可见内容(的顶部)的距离的度量。当一个元素的内容没有产生垂直方向的滚动条,那么它的 scrollTop 值为0。

document.documentElement.scrollLeft

document.documentElement.scrollTop

如果要查看整张网页的水平的和垂直的滚动距离,要从document.documentElemen元素上读取。

Element节点对象对应网页的 HTML 元素。每一个 HTML 元素,在 DOM
树上都会转化成一个Element节点对象。

(5) Element.offsetHeight,Element.offsetWidth

相关属性

——–Element.offsetHeight——–包括padding,border,滚动条

Element.clientHeight,Element.clientWidth

——–Element.clientHeight——–只包括padding
  • Element.offsetHeight属性返回元素的垂直高度。
  • Element.offsetWidth 属性返回元素的水平宽度。
    offsetHeight可以理解成元素左下角距离左上角的位移,offsetWidth是元素右上角距离左上角的位移。它们的单位为像素,都是只读。
  • 这两个属性值包括Padding和Border、以及滚动条。
    这也意味着,如果不存在内容溢出,Element.offsetHeight只比Element.clientHeight多了边框的高度。

// 网页总高度
document.documentElement.offsetHeight
document.body.offsetHeight

// 网页总宽度
document.documentElement.offsetWidth
document.body.offsetWidth

分别返回元素的高度和宽度,始终是整数值。

(6) Element.offsetLeft,Element.offsetTop

  • Element.offsetLeft返回当前元素左上角相对于Element.offsetParent节点的水平位移,
  • Element.offsetTop返回垂直位移,单位为像素。通常,这两个值是指相对于父节点的位移。

如果该元素是内联元素,则返回值为 0。

总结:

client,scroll,offset的区别:
http://blog.csdn.net/k491022087/article/details/52629743

整张网页的高度和宽度,可以从document.documentElement(即<html>元素)或<body>元素上读取。

// 网页总高度
document.documentElement.offsetHeight
document.documentElement.scrollHeight
document.body.offsetHeight
document.body.scrollHeight

// 网页总宽度
document.documentElement.offsetWidth
document.documentElement.scrollWidth
document.body.offsetWidth
document.body.scrollWidth

由于<html>和<body>的宽度可能设得不一样,因此从<body>上取值会更保险一点。






-----------------------------------------------------------------------

视口的高度和宽度(包括滚动条),有两种方法可以获得。
对于整个网页,基本都不会设置border,所以只考虑padding和滚动条的影响


// 视口高度
window.innerHeight // 包括滚动条
document.documentElement.clientHeight // 不包括滚动条

// 视口宽度
window.innerWidth // 包括滚动条
document.documentElement.clientWidth // 不包括滚动条






-----------------------------------------------------------------------

网页目前滚动的距离,可以从document.documentElement节点,和document.body 上得到。

(重要)(重要)(重要))(重要))(重要))(重要))(重要))(重要))(重要))(重要))(重要)



// 网页滚动的水平距离
document.documentElement.scrollLeft
document.body.scrollLeft

// 网页滚动的垂直距离
document.documentElement.scrollTop
document.body.scrollTop








从盒模型的概念上来讲,返回的数值计算包括元素的 content 和 padding
,不包括 border 和 margin 。

案列:

回到顶部按钮功能:
(1) 监听滚动事件,如果当前的 scrollTop值 大于
文档的可视高度clientHeight,就显示回到顶部的按钮;否则,隐藏;
(2) 设置总时间比如:500ms
(3) 求出滚动的速度:当前的scrollTop值 / 总时间
(4) 设置每次滚动的时间stepTime:比如 10ms
(5) 计算每次滚动的距离:速度*stepTime
(6)
设置定时器,当scrollTop<=0时,清除定时器,并跳出定时器里面的距离计算

import React,{Component} from 'react';



export default class toTOP extends Component {
    state = {
        buttonShow: false
    }
    componentWillMount() {
        window.addEventListener('scroll',this.onScroll)  // 监听滚动事件
    }
    onScroll = () => {
        var currentTop = document.documentElement.scrollTop || document.body.scrollTop;   // 顶部到最顶部的距离
        var viewPortHeight = document.documentElement.clientHeight || document.body.clientHeight;  // 可视高度

        if ( currentTop > viewPortHeight) {  // 大于显示按钮
            this.setState({
                buttonShow:true
            })
        } else {
            this.setState({ // 小于隐藏按钮
                buttonShow: false
            })
        }
    }
    goTop = () => {
        var currentTop = document.documentElement.scrollTop || document.body.scrollTop;
        var totalTimes = 200;
        var speed = currentTop/totalTimes ;
        var StepTime = 10;
        var setpDistance = speed * StepTime;

        var timer = window.setInterval(()=>{     // var itmer = setInterval()也可以,不要window
            if ( currentTop <=0 ) {
                window.clearInterval(timer);
                return;
            }
            currentTop = currentTop - setpDistance;
            document.documentElement.scrollTop = currentTop;
            document.body.scrollTop = currentTop;
        },StepTime)

    }
    render() {
        return (
            <div >
                <div>
                    回到顶部测试
                </div>

                <div 
                ref="button"  
                onClick={this.goTop}
                style={
                    this.state.buttonShow
                    ?
                    {
                        display:'inline-block',
                        border:'1px solid red',
                        background:'yellow',
                        padding:'10px 30px',
                        position:'fixed',
                        bottom:'60px',
                        right:'20px'
                    }
                    :
                    {
                        display:'none',
                        border:'1px solid red',
                        background:'yellow',
                        padding:'10px 30px',
                        position:'fixed',
                        bottom:'60px',
                        right:'20px'
                    }

                }>
                    回到顶部
                </div>


                <div style={{padding:'20px 160px'}}>
                年参演电视剧《与青春有关的日子》,开始在影视圈崭露头角[1]  。2005年拍摄古装剧《锦衣卫》。2007年主演赵宝刚导演的青春剧《奋斗》;[2]  同年,主演首部电影《走着瞧》。2008年主演滕华涛执导的电视剧《蜗居》,饰演80后城市青年小贝。[1]  2009年,在电影《海洋天堂》中扮演自闭症患者王大福;同年参演抗战题材的电视剧《雪豹》[4]  。2011年,主演的电视剧《裸婚时代》在各大卫视播出;[5]  2011年-2012年连续2年获得北京大学生电影节[6-7]  最受大学生欢迎男演员奖。2012年,凭借电影《失恋33天》获得第31届大众电影百花奖最佳男主角奖;[8]  同年成立自己经营的北京君竹影视文化有限公司,并导演第一部影视作品《小爸爸》。2013年2月,主演的电影《西游·降魔篇》在全国上映。[9]  
2014年3月28日,主演的中韩合资文艺爱情片《我在路上最爱你》在全国上映。2014年12月18日,在姜文执导的动作喜剧片《一步之遥》中扮演武七一角。[10]  2016年,主演电视剧《少帅》,饰演张学良[11]  ;主演电视剧《剃刀边缘》[12]  。7月15日导演的电影《陆垚知马俐》上映。[13]  
演艺事业外,文章也参与公益慈善事业,2010年成立大福自闭症关爱基金。
2017年9月16日,凭借《陆垚知马俐》获得第31届中国电影金鸡奖导演处女作奖。[14]  

关于你。就是因为我的害怕,我亲眼看你走向她。我喜欢你是事实,你有女朋友也是事实。我以为我不说出口就会保持这样的朋友关系,却还是她赶了个巧,那应该是个寒假,你有女朋友了,我还是听说,我那么爱,却还是无果。于是我和她之间就莫名其妙的就多少有了敌人的感觉,或许就是别人口中的那样,世界上完全不相干的两个女人,会因为一个男人要么很友好,要么是仇恨。关于她我做不到友好,但也不是仇恨,只是你选择了她,我就希望她好好爱你,照顾你,连我的份也一起爱了。自爱上你的那天起,思念便成了戒不掉的瘾。你的一言一笑,一颦一蹙,无不牵动我的心,百千尘思,唯念一缕;万千红颜,唯恋一人。我愿意一生漂泊浪迹在你的故事里,甘愿为你鞍前马后,马首是瞻,即使你从未给我一句承诺,即使你从未给我半分爱情,依然无悔无怨。
   关于你。一场高考,考散了我们,毕业了会不会就是终生最后一见,很高兴,我们不是。各奔东西了,你们继续上了大学,值得欣慰的是,你们也是异地,这样不能算是我心机,只能说是恰巧,你们的安排恰合我意。后来也有听说,她从她的城市去看你,而那时的我能说什么呢。她是真心爱你,这是事实。我也曾和闺蜜说过,一生至少该有一次,为了某个人而忘了自己,不求有结果,不求同行,不求曾经拥有,甚至不求你爱我,只求在我最美的年华里,遇到你。今生遇见你,我觉得是幸福的,尽管这幸福交杂着万般痛苦。我也曾幻想着悄悄地去到你的学校,在某个阳光明媚的下午,在你去教室的路上和你来场偶遇,精心准备的偶遇,。可是我还来不及去和你偶遇,你们就毕了业。爱是种很玄的东西,说不清,道不明,剪不断,理还乱。世上,有种爱明知没有结果,却依然坚守原地,不舍离去,哪怕握不住你的一丝余温,依然选择默默为你守候。一路来去,心门只为你独开,山城只为你独驻,白天只为你旖旎,黑夜只为你流连。因为爱你,哪怕心入住荒岛,还是会以最深情的眼神,看着你幸福。
                </div>

            </div>
        )
    }
}

如果有滚动条,返回的数值会减去滚动条占据的宽度或高度。

// 浏览器视口高度document.documentElement.clientHeight// 网页总高度document.body.clientHeight

Element.clientLeft,Element.clientTop

分别返回元素的左边框宽度和上边框宽度,没有边框则返回 0。

Element.scrollHeight,Element.scrollWidth

返回当前元素的总高度和总宽度,包括溢出容器、当前并不可见的部分。

包括 padding 区域。

包括伪元素的宽度和高度。

不包含滚动条的宽度和高度。

来个小 demo 辅助下理解:

 666 .box {width: 200px; height: 200px; overflow: hidden;border: 1px solid red; padding: 10px; position: relative;}.box::after {position: absolute; content: '';width: 100px; height: 100px; left: 100%;}let box = document.querySelectorconsole.log // 320console.log // 220

可以看到 box 元素的 scrollHeight 是 220,这个和我们提到的「包括 padding
区域」相符合。

那 box 元素的 scrollWidth 为啥是 320 ?
是因为伪元素的位置和宽度,虽然伪元素溢出被隐藏了,但是这个属性返回的数值依然包括它。

当然不仅仅包括它的宽度和高度,它所处的位置也会计算在内。

比如把伪元素的 css 改一下:

.box::after {position: absolute; content: '';width: 100px; height: 100px;left: 120%; top: 120%;}

现在你要不要猜一下 box 的 scrollWidth 和 scrollHeight 分别是多少?

Element.scrollLeft,Element.scrollTop

可读写,设置该属性的值,会导致浏览器将当前元素自动滚动到相应的位置。

分别返回当前元素的水平滚动距离和垂直滚动距离。

对于那些没有滚动条的网页元素,这两个属性总是等于 0。

如果要查看整张网页的水平的和垂直的滚动距离,要从
document.documentElement 元素上读取。

document.documentElement.scrollLeftdocument.documentElement.scrollTop

Element.offsetHeight,Element.offsetWidth

分别返回元素的高度和宽度,包括元素本身的高和宽、padding 和 border
,以及滚动条的高和宽。

如果元素的 display 为 none,则返回 0。

与 clientHeight 和 clientWidth
相比,我想这对属性用的更多一点,因为更多的时候我们需要获取的是元素的完整宽高。

Element.offsetLeft,Element.offsetTop

返回当前元素左上角相对于 Element.offsetParent 节点的水平和垂直位移。

说到这个我们来了解下 Element.offsetParent:

Element.offsetParent 属性返回最靠近当前元素的、并且 CSS 的 position
属性不等于 static 的上层元素。

如果该元素是不可见的,或者位置是固定的,则offsetParent属性返回null。

如果某个元素的所有上层节点的position属性都是static,则Element.offsetParent属性指向元素。

摘自《阮一峰 JavaScript 教程》

相关方法

Element.getBoundingClientRect()

返回一个对象,提供当前元素的大小、位置等信息。

我常用来它获取元素的宽高和坐标。

width height x 元素左上角相对于 视口 的横坐标 y left right top bottom

由于元素相对于视口的位置,会随着页面滚动变化,因此表示位置的四个属性值,都不是固定不变的。如果想得到绝对位置,可以将
left 属性加上 window.scrollX , top 属性加上 window.scrollY。

摘自《阮一峰 JavaScript 教程》

四 鼠标事件

MouseEvent 接口

let event = new MouseEvent

通过 addEventListener 添加的 click 事件所产生的事件对象也是 MouseEvent
实例。

let box = document.querySelectorbox.addEventListener => {console.log

这个事件对象,也就是 MouseEvent 实例,有很多属性,这里来简单分析一下。

MouseEvent.clientX 和 MouseEvent.clientY

分别返回鼠标位置相对于 浏览器窗口 左上角的水平坐标和垂直坐标。

client 本来就是客户端的意思,web 中的客户端就是浏览器,那 clientX 和
clientY 自然就是相对于浏览器的位置了。

这两个属性还分别有一个别名 MouseEvent.x 和 MouseEvent.y 。

MouseEvent.screenX,MouseEvent.screenY

分别返回鼠标位置相对于 屏幕 左上角的水平坐标和垂直坐标。

screen 是屏幕的意思,所以,你懂的。

MouseEvent.offsetX,MouseEvent.offsetY

分别返回鼠标位置相对于 目标节点 左上角 padding 边缘 的
水平距离和垂直距离。

offset
有偏移的意思,所以这里也可以理解为鼠标位置相对于目标元素内部左上角的偏移值,和目标元素本身以及外部的元素都无关。

那 「padding 边缘」是什么意思呢?

上图中三个元素分别有红蓝绿三种边框来区分,红蓝边框宽度为 1px , 绿边框为
30px 。每个元素都有 padding 值。具体代码如下:

Hello/* css */body {border: 1px solid red; margin: 0; padding: 20px;}.parent {border: 1px solid blue; padding-top: 50px;}.hello {width: 100px; height: 100px; padding: 100px; border: 30px solid green;}

我们给 hello 元素添加一个 click 时间监听函数:

// jslet hello = document.querySelectorhello.addEventListener => {console.logconsole.logconsole.log

分别点击 hello
元素的绿色边框和空白区域,会发现前者的值为负数,后者的值为整数,且都是相对空白区域的左上角开始计算的。

这就是我们一开始提到的 「鼠标位置相对于 目标节点 左上角 padding 边缘 的
水平距离和垂直距离」 这句话的意思。

MouseEvent.pageX,MouseEvent.pageY

分别返回鼠标位置相对于文档左上角的距离。

MouseEvent.movementX,MouseEvent.movementY

返回当前位置与上一个 mousemove 事件之间的水平距离和垂直距离。

很明显这两个属性和 mousemove 事件肯定有着密切的关系,所以我们再了解一下
mousemove 事件:

当鼠标在一个节点内部移动时触发。当鼠标持续移动时,该事件会连续触发。为了避免性能问题,建议对该事件的监听函数做一些限定,比如限定一段时间内只能运行一次。

说到这个应该会牵扯到「节流」,暂不深入了。

这两个属性还是很有用的,我虽然没咋用过,不过目前想来可以用来判断鼠标的移动方向等。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

标签:, , , , , ,

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图