TouchMove Touch Events di chuyên trái(left) phải(right) mobile iphone trong js javascript

Thảo luận trong 'Lập trình Javascript, js' bắt đầu bởi seolagi, 25/10/21.

  1. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,027
    Đã được thích:
    80
    Điểm thành tích:
    48
    Cho mình xin sự kiện TouchMove Touch Events di chuyên sang trái(left) phải(right) trong js jQuery hay javascript trên mobile như thé nào?

    Nghĩa là khi người dùng rê tay kéo sang trái hay rê tay kéo sang phải mình sẽ lắng nghe và bắt được sự kiện này để xử lý code gì đó.

    Bạn nào viết cách bắt sự kiện này trong javascript hay js không cho mình đoạn code nhé.

    su-kien-tren-mobi.jpg
     
    Cảm ơn đã xem bài:

    TouchMove Touch Events di chuyên trái(left) phải(right) mobile iphone trong js javascript

  2. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,883
    Đã được thích:
    1,193
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Của bạn đây nhé, nhúng nó vào footer html hay header của web nhé. Nó sẽ lắng nghe và khi người dùng nhấn màn hình rê sang trái hay phải sẽ trả về sự kiện đúng như bạn cần.

    HTML:
     
    //sự kiện trên mobi rê qua trái, và rê qua phải
    var xDown = null, yDown = null, xUp = null, yUp = null;
    document.addEventListener('touchstart', touchstart, false);
    document.addEventListener('touchmove', touchmove, false);
    document.addEventListener('touchend', touchend, false);
    function touchstart(evt) { const firstTouch = (evt.touches || evt.originalEvent.touches)[0]; xDown = firstTouch.clientX; yDown = firstTouch.clientY; }
    function touchmove(evt) { if (!xDown || !yDown) return; xUp = evt.touches[0].clientX; yUp = evt.touches[0].clientY; }
    function touchend(evt) {
        var xDiff = xUp - xDown, yDiff = yUp - yDown;
        if ((Math.abs(xDiff) > Math.abs(yDiff)) && (Math.abs(xDiff) > 0.33 * document.body.clientWidth)) {
            if (xDiff < 0) {
                //sang phải(right)
            }
            else {
                //sang trái(left)
            }
        }
        xDown = null, yDown = null;
    }
    
     
    seolagi thích bài này.
  3. seolagi
    Tham gia ngày:
    16/4/14
    Bài viết:
    1,027
    Đã được thích:
    80
    Điểm thành tích:
    48
    Cảm ơn ad, code tuyệt vời, em đã bắt được sự kiện rồi.