jstouch事件详解

jstouch是JavaScript中一个非常重要的事件，在移动端开发领域中尤为常见。它能够监控用户在触摸屏幕上滑动、点击和长按等操作，提供了丰富的交互能力。本文将从touch事件、touch事件位置、js事件onchange、移动端基本的touch事件、jsfocus事件等多个方面对jstouch事件做详细的阐述。

一、touch事件

touch是jstouch事件的核心概念，它代表用户在移动设备屏幕上点击、拖拽、滑动等操作的触摸点。touch事件有一些比较重要的概念及属性，下面一一介绍。

1. touchstart事件

touchstart事件是在用户触摸屏幕上的某一位置时触发的事件。

<script>
    document.addEventListener('touchstart', function(event) {
        console.log('touchstart', event);
    }, false);
</script>

2. touchmove事件

touchmove事件是在用户触摸屏幕上某一位置并在屏幕上滑动时触发的事件。

<script>
    document.addEventListener('touchmove', function(event) {
        console.log('touchmove', event);
    }, false);
</script>

3. touchend事件

touchend事件是在用户停止触摸屏幕上某一位置时触发的事件。

<script>
    document.addEventListener('touchend', function(event) {
        console.log('touchend', event);
    }, false);
</script>

二、touch事件位置

在touch事件中，event对象中还有关于触摸点位置的重要属性clientX和clientY。clientX代表用户在屏幕上触摸点的x坐标，clientY代表用户在屏幕上触摸点的y坐标。

<script>
    document.addEventListener('touchstart', function(event) {
        console.log(`touchstart at (${event.touches[0].clientX},${event.touches[0].clientY})`);
    }, false);
</script>

三、js事件onchange

onchange事件是input元素的一个重要事件，它会在输入框的值改变时触发。通过配合touch事件，我们可以实现许多有趣的交互效果。

1. touch事件与onchange事件

<script>
    var input = document.querySelector('input');
    input.addEventListener('touchstart', function() {
        input.addEventListener('change', function(e) {
            console.log('input changed', e.target.value);
        }, false);
    }, false);
</script>

2. 延迟触发与防抖动

由于用户在输入时频繁触发change事件，因此我们要将其延迟处理或者使用防抖动的方法。

<script>
    var input = document.querySelector('input');
    var timeoutId;
    input.addEventListener('touchstart', function() {
        timeoutId = setTimeout(function() {
            input.addEventListener('change', function(e) {
                console.log('input changed', e.target.value);
            }, false);
        }, 300);
    }, false);

    input.addEventListener('touchend', function() {
        clearTimeout(timeoutId);
        input.removeEventListener('change', function() {});
    }, false);
</script>

四、移动端基本的touch事件

移动端常用的touch事件包括：tap、doubletap、swipeLeft、swipeRight、swipeUp、swipeDown、longtap等，在实际开发中，它们可以提供非常丰富的交互效果。

1. tap事件

tap事件是在短时间内连续点击同一元素时触发的事件。

<script>
    var div = document.querySelector('div');
    div.addEventListener('touchstart', function(event) {
        var startTime = new Date().getTime();
        var touch = event.touches[0];
        var x = touch.pageX;
        var y = touch.pageY;

        div.addEventListener('touchend', function(event) {
            var duration = new Date().getTime() - startTime;
            var touch = event.changedTouches[0];
            var deltaX = touch.pageX - x;
            var deltaY = touch.pageY - y;

            if (duration <= 300 && Math.abs(deltaX) < 5 && Math.abs(deltaY) < 5) {
                console.log('tap');
            }
        }, false);
    }, false);
</script>

2. doubletap事件

doubletap事件是在用户在短时间内双击同一元素时触发的事件。

<script>
    var div = document.querySelector('div');
    var lastTapTime = 0;
    div.addEventListener('touchstart', function(event) {
        var currentTime = new Date().getTime();
        var duration = currentTime - lastTapTime;
        if (duration <= 300) {
            console.log('doubletap');
        }
        lastTapTime = currentTime;
    }, false);
</script>

3. swipeLeft/swipeRight/swipeUp/swipeDown事件

swipeLeft/swipeRight/swipeUp/swipeDown事件是在用户在屏幕上滑动时触发的事件。

<script>
    var div = document.querySelector('div');
    var startX, startY;
    div.addEventListener('touchstart', function(event) {
        startX = event.touches[0].pageX;
        startY = event.touches[0].pageY;
    }, false);

    div.addEventListener('touchmove', function(event) {
        event.preventDefault();
    }, false);

    div.addEventListener('touchend', function(event) {
        var endX = event.changedTouches[0].pageX;
        var endY = event.changedTouches[0].pageY;
        var deltaX = endX - startX;
        var deltaY = endY - startY;

        if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) >= 50) {
            if (deltaX > 0) {
                console.log('swipeRight');
            } else {
                console.log('swipeLeft');
            }
        } else if (Math.abs(deltaY) >= Math.abs(deltaX) && Math.abs(deltaY) >= 50) {
            if (deltaY > 0) {
                console.log('swipeDown');
            } else {
                console.log('swipeUp');
            }
        }
    }, false);
</script>

五、jsfocus事件

当用户在移动设备上访问网页时，访问元素时自动弹出键盘可能会影响用户体验。jsfocus事件能够在移动设备上实现类似于click事件的效果，同时不会自动弹出键盘，提高了用户交互的友好度。

<script>
    var input = document.querySelector('input');
    input.addEventListener('touchstart', function(event) {
        input.focus();
    }, false);
</script>