移动设备上不⽀持⿏标事件，好在webkit内核的移动浏览器⽀持 touch 事件，所以触摸事件是移动应⽤中所必须的。touchstart、touchmove、touchend事件可以类⽐于mousedown、mouseover、mouseup的触发。 ⼀、touch 相应事件
touchstart : 当⼿指触摸屏幕时触发；即使已经有⼀个⼿指放在了屏幕上也会触发。
touchmove : 当⼿指在屏幕上滑动时连续的触发。在这个事件发⽣期间，调⽤preventDefault()可阻⽌滚动。
touchend : 当⼿指从屏幕上移开时触发。
touchcancel : 当系统停⽌跟踪触摸时触发。关于此事件的确切触发事件，⽂档中没有明确说明。
touches : 表⽰当前跟踪的触摸操作的Touch对象的数组。
targetTouches : 特定于事件⽬标的Touch对象的数组。
changeTouches : 表⽰⾃上次触摸以来发⽣了什么改变的Touch对象的数组。
每个Touch对象包含下列属性：防喷网
clientX : 触摸⽬标在视⼝中的X坐标。
clientY : 触摸⽬标在视⼝中的Y坐标。
identifier：表⽰触摸的唯⼀ID。
pageX：触摸⽬标在页⾯中的x坐标。
pageY：触摸⽬标在页⾯中的y坐标。
高空施工screenX : 触摸⽬标在屏幕中的x坐标。
screenY : 触摸⽬标在屏幕中的y坐标。
target : 触摸的DOM节点坐标
⼆、PC 与 移动端 的适配问题（兼容） 【重点】
既然使⽤HTML5，当然是看中他的跨平台特性了，不仅仅要iOS和Android适配，pc上直接打开⽹页最好也是可以的，但是pc上只⽀持⿏标事件，
所以，解决⽅案：判断是否pc设备，若是pc，需要更改touch事件为⿏标事件，否则默认触摸事件。
<script>
/*** ⼿机按下态 * @type {{touchstart: string, touchend: string, initTouchEvents: Function}} */
var touchEvents = {
touchstart: "touchstart",
touchend: "touchend",
initTouchEvents: function () {
if(!browserRedirect()){
}
}
};
function browserRedirect() {
var sUserAgent = LowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
云朵制造机
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
return true; // 移动设备
全叶青兰} else {
return false; // PC
}
}
var phone = ElementById("phone");
touchEvents.initTouchEvents();
phone.uchstart, function (e) {
var self=this;
self.style.background = "red";
超微电极e.stopPropagation();
e.preventDefault();
});
phone.uchend, function (e) {
var self=this;
self.style.background = "blue";
e.stopPropagation();
e.preventDefault();
});
</script>
页⾯上：
<style>
* { margin: 0; padding: 0; }
a { display: block;width: 200px;font-size: 16px; text-align: center; line-height: 80px;cursor: pointer;margin: 50px;} .phone { background: green; }
</style>
<a id="phone" class="phone">请点击我</a>
就是这样，若在pc上，则使⽤⿏标事件；在移动设备中，就使⽤触摸事件。
效果展⽰：
烧录ic1、PC端：
（1）初始：
（2）⿏标在 a 上按下：
（3）⿏标在 a 上松开：
2、⼿机端：
（1）初始：
（2）⼿指在 a 上按下：
额，这个截不到图。。。但是亲测⼿指按在 a 上即触发 touchstart 事件， a 背景⾊变为红⾊。（3）⼿指从 a 上拿开：
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议