使用JS在Android手机上实现:点击后返回X、Y坐标

Android系统在部分界面是不允许截图的,也就不能很容易的获取到ID、name、xpath等信息来定位元素,这个时候就需要通过X、Y坐标来定位了。

获取X、Y坐标,相对容易一点的方法是使用javascript。不多说了,直接上代码:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <title>get xy</title>

    <style>

        html,body{

            width: 100%;

            height: 100%;

        }

        body{

            margin: 0;

            padding: 0;

            box-sizing: border-box;

            background: blue;

        }

        .box{

            width: 100%;

            height: 100%;

            background: gray;

            float: left;

        }

    </style>

</head>

<body>

<div class="box">

请轻触需要获取坐标的位置<BR>

X坐标:<span id="s1"></span> 屏幕宽度: <span id="s3"></span><BR>

Y坐标:<span id="s2"></span> 屏幕高度: <span id="s4"></span>

</div>

<script>

    window.onload = function () {

        var box = document.querySelector('.box');

        box.addEventListener('touchstart',function (e) {            

            document.getElementById("s1").innerHTML = e.touches[0].screenX*3;

            document.getElementById("s2").innerHTML = e.touches[0].screenY*3;

            document.getElementById("s3").innerHTML = screen.width*3;

            document.getElementById("s4").innerHTML = screen.height*3;

        });

    }

</script>

</body>

</html>

使用方法:将以上代码保存成html文件,并放到web服务器,使用Android手机访问该页面。

点击需要获取的位置,页面显示X、Y坐标:


遗留问题:

1、js获取的坐标值和屏幕宽度、高度值,和实际值相差3倍,已全局乘以3规避;

2、由于在浏览器中运行,所以浏览器的上下工具栏的位置无法获取坐标

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、下面我将简单的介绍移动端布局的八种方式:** 1.固定布局**2.流动布局3.浮动布局4.定位布局5.混...
    张宪宇阅读 1,845评论 0 2
  • review DOM操作 1.获取元素的方法 document.getElementById() document...
    3hours阅读 338评论 0 0
  • CSS CSS3 布局属性 标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100 !importan...
    53cfdb355418阅读 555评论 0 0
  • WebAPI 一、DOM 1. 获取元素 ①根据标签名:document.getElementsByTagName...
    54_30bd阅读 215评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 29,181评论 1 45

友情链接更多精彩内容