大家好，又见面了，我是你们的朋友全栈君。
目录
触摸事件概述
触摸事件编码
触摸手指个数分析
触摸目标 DOM 元素分析
触摸位置分析
触摸事件概述
1、HTML5 中， PC 端基于鼠标的界面互动主要是单击， 移动端界面交互方式主要是触摸。
2、移动端浏览器触摸事件：
事件名称 | 描述 | 是否包含 touches 数组 |
|---|---|---|
touchstart | 触摸开始，多点触控，后面的手指同样会触发 | 是 |
touchmove | 接触点改变，滑动时 | 是 |
touchend | 触摸结束，手指离开屏幕时 | 是 |
touchcancel | 触摸被取消，当系统停止跟踪触摸的时候触发 | 否 |
3、每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：
1）touches：当前位于屏幕上的所有手指的列表。 2）targetTouches：位于当前DOM元素上手指的列表。 3）changedTouches：涉及当前事件手指的列表。
4、每个 Touch 对象包含的属性如下：
clientX：触摸目标在视口中的x坐标。 clientY：触摸目标在视口中的y坐标。 identifier：标识触摸的唯一ID。 pageX：触摸目标在页面中的x坐标。 pageY：触摸目标在页面中的y坐标。 screenX：触摸目标在屏幕中的x坐标。 screenY：触摸目标在屏幕中的y坐标。 target：触摸的DOM节点目标。
触摸事件编码
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>触摸事件</title>
<!-- 引入 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//手指触摸屏幕时触发事件
$('body').on('touchstart', function () {
$('p').css({'color': '#f00'});
console.log("用户手指触摸到屏幕...");
});
//手指在屏幕上移动时触发
$('body').on('touchmove', function (even) {
$('p').css({'color': '#0f0'});
console.log("用户手指在屏幕上移动...");
});
//手指离开屏幕时触发
$('body').on('touchend', function () {
$('p').css({'color': '#00f'});
console.log("用户手离开屏幕...");
});
});
</script>
</head>
<body>
<p>
工人阶级是我国的领导阶级，是全面建成小康社会、坚持和发展中国特色社会主义的...<br>
在中国工会第十七次全国代表大会即将召开之际，让我...<br>
工人阶级是我们党最坚实最可靠的阶级基础...<br>
我国工人阶级是我们党最坚实最可靠的阶级基础。我国工人阶级从来都具有走在...<br>
工人阶级和广大劳动群众始终是推动我国经济社会发展、维护社会安定团结的根本...<br>
改革开放以来，我国工人阶级队伍不断壮大，素质全面提高，结构更加优化，面貌焕然...<br>
</p>
</body>
</html>1、如果在 PC 上访问，可以使用 Chrome 浏览器的移动响应式设备进行模拟，或者直接在移动设备(如手机)上访问
2、Chrome 浏览器，F12 进入开发者模式，然后点击左上角的第二个按钮进行切换。
3、上面是使用 JQuery 的写法，推荐使用如下所示的 JavaScript 方式，因为在获取回调函数的 事件对象时，JQuery 方式会有问题，JavaScript 则是没有问题的。
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>触摸事件</title>
<!-- 引入 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
/**
* element.addEventListener(event, function, useCapture)：向指定元素添加事件句柄
* useCapture：true - 事件句柄在捕获阶段执行；false(默认) - 事件句柄在冒泡阶段执行
*/
document.addEventListener('touchstart', touch, false);
document.addEventListener('touchmove', touch, false);
document.addEventListener('touchend', touch, false);
function touch(event) {
/**兼用 IE 浏览器*/
var event = event || window.event;
var oInp = document.getElementById("inp");
switch (event.type) {
case "touchstart":
oInp.innerHTML = "Touch started (" event.touches[0].clientX "," event.touches[0].clientY ")";
break;
case "touchend":
oInp.innerHTML = "<br>Touch end (" event.changedTouches[0].clientX "," event.changedTouches[0].clientY ")";
break;
case "touchmove":
oInp.innerHTML = "<br>Touch moved (" event.touches[0].clientX "," event.touches[0].clientY ")";
break;
}
}
</script>
</head>
<body>
<p id="inp">
</p>
</body>
</html>4、主要就是在绑定事件的部分略有不同，可以参考 HTML DOM addEventListener() 方法
触摸手指个数分析
1、如下所示，将屏幕上触摸的手指个数信息打印出来进行分析。
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css" rel="stylesheet">
.start {
border: 1px solid red;
margin-top: 5px;
}
.move {
border: 1px solid green;
margin-top: 5px;
overflow: auto;
}
.end {
border: 1px solid blue;
margin-top: 5px;
}
</style>
<title>触摸事件</title>
<!-- 引入 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//$(".move")[0].addEventListener("touchstart", function (event) {
document.addEventListener("touchstart", function (event) {
var touchesSize = event.touches.length;
var targetTouchesSize = event.targetTouches.length;
var changedTouchesSize = event.changedTouches.length;
$(".start").append("tSize=" touchesSize ",targetTSize=" targetTouchesSize ",changedTSize=" changedTouchesSize "rn");
});
//$(".move")[0].addEventListener("touchstart", function (event) {
document.addEventListener("touchmove", function (event) {
var touchesSize = event.touches.length;
var targetTouchesSize = event.targetTouches.length;
var changedTouchesSize = event.changedTouches.length;
$(".move").append("tSize=" touchesSize ",targetTSize=" targetTouchesSize ",changedTSize=" changedTouchesSize "rn");
});
//$(".move")[0].addEventListener("touchstart", function (event) {
document.addEventListener("touchend", function (event) {
var touchesSize = event.touches.length;
var targetTouchesSize = event.targetTouches.length;
var changedTouchesSize = event.changedTouches.length;
$(".end").append("tSize=" touchesSize ",targetTSize=" targetTouchesSize ",changedTSize=" changedTouchesSize "rn");
});
});
</script>
</head>
<body>
<div class="start">
<b>touchstart</b>
</div>
<div class="move">
<b>touchmove</b>
</div>
<div class="end">
<b>touchend</b>
</div>
</body>
</html>2、如下所示，左图是 document.addEventListener、右图是 $(“.move”)[0].addEventListener。
3、tSize 是当前位于屏幕上的所有手指的列表个数、targetTSize 是位于当前绑定事件的 DOM 元素上手指的列表个数、changedTSize 是涉及当前事件手指的列表个数。
4、对于各个数据的含义，想必测试之后一目了然，就不再多说了。
触摸目标 DOM 元素分析
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css" rel="stylesheet">
html, body {
width: 100%;
height: 100%;
}
.testArea1 {
width: 100%;
height: 15%;
background-color: #1b6d85;
}
.testArea2 {
width: 100%;
height: 15%;
background-color: #1b6d85;
}
.start {
border: 1px solid red;
margin-top: 5px;
}
.move {
border: 1px solid green;
margin-top: 5px;
overflow: auto;
}
.end {
border: 1px solid blue;
margin-top: 5px;
}
</style>
<title>触摸事件</title>
<!-- 引入 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
/**阻止浏览器默认右键点击事件*/
$(document).bind("contextmenu", function () {
console.log("用户点击鼠标右键....." new Date().getTime());
return false;
});
$(function () {
/**注意调用的方法不要加括号()*/
$(".testArea1")[0].addEventListener("touchstart", touchstartFun);
$(".testArea1")[0].addEventListener("touchmove", touchmoveFun);
$(".testArea1")[0].addEventListener("touchend", touchendFun);
$(".testArea2")[0].addEventListener("touchstart", touchstartFun);
$(".testArea2")[0].addEventListener("touchmove", touchmoveFun);
$(".testArea2")[0].addEventListener("touchend", touchendFun);
});
/**
* 手指触摸屏幕时——函数调用
* @param event
*/
function touchstartFun(event) {
/**event.targetTouches[0]：表示获取发生在当前 DOM 元素第一个手指对象
* target：手指触摸的 DOM节点，对原生 JS 不熟悉时，使用 $()转为 JQuery 对象操作
* */
console.log("start——" event.targetTouches[0].target.innerHTML);//js获取触摸DOM对象的文本值
console.log("start——" $(event.targetTouches[0].target).attr("class"));//JQuery 获取触摸对象的class属性值
}
/**
* 手指在触摸屏上移动时——函数调用
* @param event
*/
function touchmoveFun(event) {
/**event.targetTouches[0]：表示获取发生在当前 DOM 元素第一个手指对象
* target：手指触摸的 DOM节点，对原生 JS 不熟悉时，使用 $()转为 JQuery 对象操作
* */
console.log("move——" event.targetTouches[0].target.innerHTML);//js获取触摸DOM对象的文本值
console.log("move——" $(event.targetTouches[0].target).attr("class"));//JQuery 获取触摸对象的class属性值
}
/**
* 手指离开屏幕时——函数调用
* @param event
*/
function touchendFun(event) {
/**event.changedTouches[0]：表示获取当前 DOM 元素发生此事件的第一个手指对象
* target：手指触摸的 DOM节点，对原生 JS 不熟悉时，使用 $()转为 JQuery 对象操作
*
* 注意：离开时应该是获取 changedTouches，而不是 targetTouches、touches，因为当手指全部离开屏幕时，它们个数可能为0
* */
console.log("end————" event.changedTouches[0].target.innerHTML);//js 获取触摸 DOM 对象的文本值
console.log("end————" $(event.changedTouches[0].target).attr("class"));//JQuery 获取触摸对象的class属性值
}
</script>
</head>
<body>
<div class="testArea1">
触摸测试区域1
</div>
<div class="start">
<b>touchstart</b>
</div>
<div class="move">
<b>touchmove</b>
</div>
<div class="end">
<b>touchend</b>
</div>
<div class="testArea2">
触摸测试区域2
</div>
</body>
</html>
触摸位置分析
代码语言：javascript复制<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!-- meta使用viewport以确保页面可自由缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css" rel="stylesheet">
html, body {
width: 100%;
height: 100%;
}
.testArea1 {
width: 100%;
height: 15%;
background-color: #1b6d85;
}
.testArea2 {
width: 100%;
height: 15%;
background-color: #1b6d85;
}
.start {
border: 1px solid red;
margin-top: 5px;
}
.move {
border: 1px solid green;
margin-top: 5px;
overflow: auto;
}
.end {
border: 1px solid blue;
margin-top: 5px;
}
</style>
<title>触摸事件</title>
<!-- 引入 jQuery 库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
/**阻止浏览器默认右键点击事件*/
$(document).bind("contextmenu", function () {
console.log("用户点击鼠标右键....." new Date().getTime());
return false;
});
$(function () {
/**注意调用的方法不要加括号()*/
$(".testArea1")[0].addEventListener("touchstart", touchstartFun);
$(".testArea1")[0].addEventListener("touchmove", touchmoveFun);
$(".testArea1")[0].addEventListener("touchend", touchendFun);
$(".testArea2")[0].addEventListener("touchstart", touchstartFun);
$(".testArea2")[0].addEventListener("touchmove", touchmoveFun);
$(".testArea2")[0].addEventListener("touchend", touchendFun);
});
/**
* 手指触摸屏幕时——函数调用
* @param event
*/
function touchstartFun(event) {
/**event.targetTouches[0]：表示获取发生在当前 DOM 元素第一个手指对象
* target：手指触摸的 DOM节点，对原生 JS 不熟悉时，使用 $()转为 JQuery 对象操作
* */
var lentgX = event.targetTouches[0].clientX;
var lentgY = event.targetTouches[0].clientY;
$(".start").append("<br>" lentgX "——" lentgY);
}
/**
* 手指在触摸屏上移动时——函数调用
* @param event
*/
function touchmoveFun(event) {
/**event.targetTouches[0]：表示获取发生在当前 DOM 元素第一个手指对象
* target：手指触摸的 DOM节点，对原生 JS 不熟悉时，使用 $()转为 JQuery 对象操作
* */
var lentgX = event.targetTouches[0].clientX;
var lentgY = event.targetTouches[0].clientY;
$(".move").append("<br>" lentgX "——" lentgY);
}
/**
* 手指离开屏幕时——函数调用
* @param event
*/
function touchendFun(event) {
/**event.changedTouches[0]：表示获取当前 DOM 元素发生此事件的第一个手指对象
* target：手指触摸的 DOM节点，对原生 JS 不熟悉时，使用 $()转为 JQuery 对象操作
*
* 注意：离开时应该是获取 changedTouches，而不是 targetTouches、touches，因为当手指全部离开屏幕时，它们个数可能为0
* */
var lentgX = event.changedTouches[0].clientX;
var lentgY = event.changedTouches[0].clientY;
$(".end").append("<br>" lentgX "——" lentgY);
}
</script>
</head>
<body>
<div class="testArea1">
触摸测试区域1
</div>
<div class="start">
<b>touchstart</b>
</div>
<div class="move">
<b>touchmove</b>
</div>
<div class="end">
<b>touchend</b>
</div>
<div class="testArea2">
触摸测试区域2
</div>
</body>
</html>
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/150770.html原文链接：https://javaforall.cn
