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>