鼠标/手指相对于元素的坐标(px转百分比)

Posted codeing or artist ?

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了鼠标/手指相对于元素的坐标(px转百分比)相关的知识,希望对你有一定的参考价值。

鼠标/手指相对于元素的坐标:鼠标或手指当前的位置 - 元素距离文档的位置

px转百分比:px / 文档尺寸 * 100

 

获取手指触摸在屏幕中相对于元素的坐标(px转百分比):

$(‘#div‘).on(‘click‘,function(e){

    //获取手指抬起时在文档中的位置
    e = e.originalEvent.changedTouches[0];
    //计算偏移值,获取手指相对于元素的坐标
    var pageX = e.pageX-$(this).offset().left, pageY = e.pageY-$(this).offset().top;
    //px转百分比
    pageX = pageX / $(this).width() * 100;
    pageY = pageY / $(this).height() * 100;
    
});

 

以上是关于鼠标/手指相对于元素的坐标(px转百分比)的主要内容,如果未能解决你的问题,请参考以下文章

鼠标事件-MouseEvent与addEventListener的用法(转)

前端面试CSS环节问题 toptranslateY这种属性如果使用百分比,是相对于谁的百分比

如何获取相对于持有 onclick 监听器的 SVG 元素的点击坐标?

常见的CSS布局单位

CSS-详解

javascript 代码技巧 —— javascript获取坐标/滚动/宽高/距离