阅读 18

onclick和addEventListener的区别,screenx影厅好吗

1、offsetX

offset表示偏移,即事件对象的左上角与原点的距离。 以元素框模型内容区域的左上角为基准点。 不包括边框。

2、clientX

事件对象相对于浏览器窗口显示区域的x、y坐标(窗口坐标),显示区域不包含工具栏和滚动条

3、pageX

事件对象相对于整个文档的坐标以像素为单位。

4、screenX

当您更改屏幕分辨率时,事件对象相对于设备屏幕左上角的坐标会随之改变

上述除了screenX/Y是装置像素单位以外,所有都是css像素单位

举一个例子来说明

Title html,body{

边距: 0自动;

padding: 0;

}

#canvas{

border :20 px固态蓝;

边距-左: 300 px;

}

var canvas=document.getelementbyid (canvas );

varCTX=canvas.getcontext('2d );

CTX.arc (0,0,5,0,2 * math.pi );

CTX.arc (200,200,5,0,2 * math.pi );

ctx.font='20px Arial ';

ctx.textAlign='start ';

ctx.fillText (画布坐标200 200 )、200、200 );

ctx.fill (;

canvas.nmusedwn=function(e ) {

console.log('e.offsetX=',e.offsetx );

console.log('e.clientX=',e.clientx );

console.log('e.pageX=',e.pagex );

console.log('e.screenX=',e.screenx );

}

如果没有滚动条,则pageX==clientX,offsetx=pagex(margin-left ) border

有滚动条的时候,pageX!=客户端tx


文章分类
代码人生
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐