移动端,触摸事件
只有移动端设备才支持
touchstart 触摸开始
touchend 触摸结束
touchmove 触摸移动
每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：
1）touches：当前位于屏幕上的所有手指的列表。
2）targetTouches：位于当前DOM元素上手指的列表。
3）changedTouches：涉及当前事件手指的列表。
注意：离开时应该是获取 changedTouches，而不是 targetTouches、touches，因为当手指全部离开屏幕时，它们个数可能为0
每个 Touch 对象包含的属性如下：
clientX：触摸目标在视口中的x坐标。
clientY：触摸目标在视口中的y坐标。
identifier：标识触摸的唯一ID。
pageX：触摸目标在页面中的x坐标。
pageY：触摸目标在页面中的y坐标。
screenX：触摸目标在屏幕中的x坐标。
screenY：触摸目标在屏幕中的y坐标。
target：触摸的DOM节点目标。
htmlcssjs
<p>
工人阶级是我国的领导阶级，是全面建成小康社会、坚持和发展中国特色社会主义的...<br>
在中国工会第十七次全国代表大会即将召开之际，让我...<br>
工人阶级是我们党最坚实最可靠的阶级基础...<br>
我国工人阶级是我们党最坚实最可靠的阶级基础。我国工人阶级从来都具有走在...<br>
工人阶级和广大劳动群众始终是推动我国经济社会发展、维护社会安定团结的根本...<br>
改革开放以来，我国工人阶级队伍不断壮大，素质全面提高，结构更加优化，面貌焕然...<br>
</p>
body{
height: 20rem;
width: 100%;
}
<script src="http://jiuaibuni.top/h5/js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//手指触摸屏幕时触发事件
$('body').on('touchstart', function (e) {
e = e || window.event;
$('p').css({'color': '#f00'});
console.log("用户手指触摸到屏幕...x"+e.originalEvent.touches[0].screenX+'y'+e.originalEvent.touches[0].screenY);
});
//手指在屏幕上移动时触发
$('body').on('touchmove', function (e) {
e = e || window.event;
$('p').css({'color': '#0f0'});
console.log("用户手指在屏幕上移动...x"+e.originalEvent.touches[0].screenX+'y'+e.originalEvent.touches[0].screenY);
});
//手指离开屏幕时触发
$('body').on('touchend', function (e) {
e = e || window.event;
console.log(e.originalEvent)
$('p').css({'color': '#00f'});
console.log("用户手离开屏幕...x"+e.originalEvent.changedTouches[0].screenX+'y'+e.originalEvent.changedTouches[0].screenY);
});
});
</script>
在获取回调函数的 事件对象时，JQuery 方式会有问题，JavaScript 则是没有问题的。
$(".box")[0] //可以成为dom对象
与document.getElementsByClassName("box")相同
htmlcssjs
<p id="inp">
</p>
随便写写
/**
* 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(e) {
/**兼用 IE 浏览器*/
e = e || window.event;
var oInp = document.getElementById("inp");
console.log(e);
switch (e.type) {
case "touchstart":
oInp.innerHTML = "Touch started (" + e.touches[0].clientX + "," + e.touches[0].clientY + ")";
break;
case "touchend":
oInp.innerHTML = "Touch end (" + e.changedTouches[0].clientX + "," + e.changedTouches[0].clientY + ")";
break;
case "touchmove":
oInp.innerHTML = "Touch moved (" + e.touches[0].clientX + "," + e.touches[0].clientY + ")";
break;
}
}
移动端触摸还需要判断触摸个数
1.当一个手指放在屏幕上时，会触发touchstart事件，如果另一个手指又放在了屏幕上，则会触发gesturestart事件，随后触发基于该手指的touchstart事件。
2.如果一个或两个手指在屏幕上滑动，将会触发gesturechange事件，但只要有一个手指移开，则会触发gestureend事件，紧接着又会触发toucheend事件。
htmlcssjs
<div class="start">
<b>touchstart</b>
</div>
<div class="move">
<b>touchmove</b>
</div>
<div class="end">
<b>touchend</b>
</div>
.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;
}
<script src="http://jiuaibuni.top/h5/js/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
// tSize 是当前位于屏幕上的所有手指的列表个数、targetTSize 是位于当前绑定事件的 DOM 元素上手指的列表个数、changedTSize 是涉及当前事件手指的列表个数。
// $(".move")[0].addEventListener("touchstart", function (e) {
document.addEventListener("touchstart", function (e) {
var touchesSize = e.touches.length;
var targetTouchesSize = e.targetTouches.length;
var changedTouchesSize = e.changedTouches.length;
$(".start").append("tSize=" + touchesSize + ",targetTSize=" + targetTouchesSize + ",changedTSize=" + changedTouchesSize + "\r\n");
});
// $(".move")[0].addEventListener("touchmove", function (e) {
document.addEventListener("touchmove", function (e) {
var touchesSize = e.touches.length;
var targetTouchesSize = e.targetTouches.length;
var changedTouchesSize = e.changedTouches.length;
$(".move").append("tSize=" + touchesSize + ",targetTSize=" + targetTouchesSize + ",changedTSize=" + changedTouchesSize + "\r\n");
});
// $(".move")[0].addEventListener("touchend", function (e) {
document.addEventListener("touchend", function (e) {
var touchesSize = e.touches.length;
var targetTouchesSize = e.targetTouches.length;
var changedTouchesSize = e.changedTouches.length;
$(".end").append("tSize=" + touchesSize + ",targetTSize=" + targetTouchesSize + ",changedTSize=" + changedTouchesSize + "\r\n");
});
});
</script>
其他事件,都是这3个基本事件的延伸
长按事件 触摸时间 > 1s
$.fn.longLongPress = function () {
var div = $(this);
console.log(div);
$(this).on({
touchstart: function (e) {
// 长按事件
timeOutEvent = setTimeout(function () {
//阻止长按默认行为
// $(div).bind('contextmenu', function (e) {
// e.preventDefault();
// })
console.log('长按了')
}, 800);
},
touchmove: function (e) {
clearTimeout(timeOutEvent);
timeOutEvent = 0;
},
touchend: function () {
clearTimeout(timeOutEvent);
if (timeOutEvent != 0) {
console.log('这是点击，不是长按');
}
return false;
}
})
}
$('.testArea1').longLongPress(); //加上长按事件
轻触事件 触摸时间 < 100ms
左滑事件 触摸移动 负数
右滑事件 触摸移动 正数
https://www.cnblogs.com/winyh/p/6714923.html
Comments | NOTHING