点击事件event的offsetX/Y,pageX/Y,clientX/Y和screenX/Y


  • offsetX/Y

    相对于被点击元素的左上角,即使事件被绑定在父元素身上,那么这个位置也是相对于当前的target对象元素来说



  • pageX/Y

    相对于文档document的左上角,即使有滚动条,文档被滚入一部分不可见,但这个位置依然是相对于文档来计算,包含的有文档被滚动条滚动隐藏的不可见部分



  • clientX/Y

    相对于浏览器可视窗口的左上角,但是不包含浏览器的导航,页签等部分,仅限于浏览器展示文档的可见区域,不包含滚动条隐藏的内容



  • screenX/Y

    相对于电脑屏幕的左上角,如果是多屏,那么这个位置是相对于主屏幕来计算



点击事件event的offsetX/Y,pageX/Y,clientX/Y和screenX/Y_第1张图片
click_event.png


如图,事件是绑在粉红的大div上面,点击黑点位置(在绿色小div上)
offsetX/Y就是相对于小绿来计算,差不多是(0, 0);
pageX/Y是红线表示的范围,因为页面有竖向滚动条切文档向上滚动隐藏了一部分,所以y方向上会计算隐藏的距离;
clientX/Y是蓝色线条表示的范围,y方向上不包含浏览器书签,导航栏,页签等的距离;
screenX/Y是绿线表示的范围,到屏幕的距离.

你可能感兴趣的:(点击事件event的offsetX/Y,pageX/Y,clientX/Y和screenX/Y)