HTML5如何控制touch的区域
//选中条件 x1=横轴位置 y1=纵轴位置
var x1, x2, y1, y2;
$(document).on("touchstart",".smallbox", function (e) {
// e.preventDefault();
var obj = $(this);
var position = $(this).offset();
x1 = position.left;
x2 = position.left + obj.width();
y1 = position.top;
y2 = position.top + obj.height();//触摸时将变量赋值
}).on("touchend", ".smallbox", function (e) {
var pos = e.originalEvent.changedTouches[0];
if (pos.pageX >= x1
&& pos.pageX <= x2
&& pos.pageY >= y1
&& pos.pageY <= y2) {//判断当前的点击位置是否在有效范围内
var obj = $(this);
if (obj.hasClass("active")) {
obj.removeClass("active");
} else {
obj.addClass("active");
}
}
e.preventDefault();
}).on("click", ".smallbox", function () {
var obj = $(this);
if (obj.hasClass("active")) {
obj.removeClass("active");
} else {
obj.addClass("active");
}
});
可以选择坐标控制区域：
function load (){
document.addEventListener('touchstart',touch, false);
document.addEventListener('touchmove',touch, false);
document.addEventListener('touchend',touch, false);
function touch (event){
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":
event.preventDefault();
oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
break;
}
}
}
window.addEventListener('load',load, false);
