获取手指滑动的坐标事件的方法

写在前面。

本篇，为整理之前的学习笔记的内容。

以load方法为例。

通过addEventListener来监听。
通过三种状态，touchstart，touchmove以及touchend。
来触发相应事件。

我认为，当前所有的框架或者插件，都是通过调用原生的方法来处理事件，无非就是做的更加精细而已。

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");
    //var old_x;
    //var old_y;
    function xy(){
        var x_px = old_x / 331.2 * 100-16;
        if (x_px > 0 && x_px < 80) {
            var w = x_px / 80 * 100 + "%";
            var x_px = x_px + "vw";
            //var y_px = old_y + "px";
            $("#btn_img").css({
                "position": "relative",
                "top": "-3vh",
                "left": x_px
            });

            $(".half").css({
                "width": w
                //"position": "relative",
                //"top": "-3vh",
                //"left": x_px
            });
        } else {

        }
    }


    switch (event.type) {
        case "touchstart":
            var old_x = event.touches[0].clientX;
            var old_y = event.touches[0].clientY;

            xy();

            break;
        case "touchend":
            var old_x = event.changedTouches[0].clientX;
            var old_y = event.changedTouches[0].clientY;

            xy();

            break;
        case "touchmove":
            event.preventDefault();
            var old_x = event.touches[0].clientX;
            var old_y = event.touches[0].clientY;

            xy();

            break;
    }

}

}

window.addEventListener(‘load’, load, false);