• js检测是否支持touch
  • 获取touch的当前位置

js检测是否支持touch

1
2
3
4
5
6
7
var hasTouch = function(){
  var touchObj={};
  touchObj.isSupportTouch = "ontouchend" in document ? true : false;
  touchObj.isEvent=touchObj.isSupportTouch?'touchstart':'click';
  return touchObj.isEvent;
}
console.log(hasTouch());

获取touch的当前位置

jQuery写法：jQuery写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('body').on('touchstart',function(e) {
    var _touch = e.originalEvent.targetTouches[0];
    var _x= _touch.pageX,_y= _touch.pageY;
    $('.logo').html(_x + ',' + _y);
});

$('body').on('touchmove',function(e) {
    var _touch = e.originalEvent.targetTouches[0];
    var _x= _touch.pageX,_y= _touch.pageY;
    $('.logo').html(_x + ',' + _y);
});

$('body').on('touchend',function(e) {
    var _touch = e.originalEvent.changedTouches[0];
    var _x= _touch.pageX,_y= _touch.pageY;
    $('.logo').html(_x + ',' + _y);
});

javascript写法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function handleTouchEvent(event) {
    //只跟踪一次触摸
    if (event.touches.length == 1) {
        var output = document.getElementById("output");
        switch (event.type) {
            case "touchstart":
                output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                break;
            case "touchend":
                output.innerHTML += "Touch ended (" + event.changedTouches[0].clientX + "," + event.changeTouches[0].clientY + ")";
                break;
            case "touchmove":
                event.preventDefault(); //阻止滚动
                output.innerHTML += "Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
                break;
        }
    }
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false);
document.addEventListener("touchmove", handleTouchEvent, false);