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");

    }

});

温馨提示:答案为网友推荐,仅供参考
第1个回答  2015-09-18

可以选择坐标控制区域:

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);

相关了解……

你可能感兴趣的内容

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 非常风气网