TouchEvent touches 属性
JavaScript基础 2022-06-08 12:07:12小码哥的IT人生shichen
TouchEvent touches 属性
实例
查出有多少手指接触表面：
function countTouches(event) {
var x = event.touches.length;
}
完整实例：
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body ontouchstart="countTouches(event)" ontouchend="countTouches(event)">
<h1>TouchEvent touches 属性</h1>
<p>请触摸此页面上的任意元素。</p>
<p>当前触摸此文档的手指数量为 <span id="demo">0</span>。</p>
<p>touches 属性返回一组触摸对象，当前触摸文档的每个手指对应一个触摸对象。</p>
<p><b>注释：</b>触摸事件仅适用于触摸设备。</p>
<script>
function countTouches(event) {
var x = event.touches.length;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
定义和用法
touches 属性返回 Touch 对象数组，当前触摸面的每个手指对应一个对象。
注释：该属性只读。
浏览器支持
表中的数字注明了完全支持该属性的首个浏览器版本。
| 属性 | Chrome | IE | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| touches | 22 | 支持 | 52 | 不支持 | 不支持 |
语法
event.touches技术细节
| 返回值： | Touch 对象的数组。 |
|---|
更多实例
返回触摸的 x 和 y 坐标：
function showCoordinates(event) {
var x = event.touches[0].clientX;
var y = event.touches[0].clientY;
}
完整实例：
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body ontouchstart="showCoordinates(event)" ontouchmove="showCoordinates(event)">
<h1>TouchEvent touches 属性</h1>
<p>请触摸此页面上的任意元素。</p>
<p>触摸的横纵坐标为：<span id="demo"></span></p>
<p><b>注释：</b>此例使用 touches<strong>[0]</strong> 意味着它只会显示一个手指（第一根手指）的坐标。</p>
<p><b>注释：</b>触摸事件仅适用于触摸设备。</p>
<script>
function showCoordinates(event) {
var x = event.touches[0].clientX;
var y = event.touches[0].clientY;
document.getElementById("demo").innerHTML = x + ", " + y;
}
</script>
</body>
</html>
可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html
