스마트폰 등으로 연속 미끄럼 처리 방법을 정리한다.
손가락이 닿기 시작할 때의 DOM과 떠나는 순간의 DOM을 간단히 얻을 수 있습니다.
손가락을 만지는 DOM을 얻기 위해 고전하다.
며칠 전에 갔어요.하지만
나는 이 방법으로 스마트폰의 미끄럼에 대응했다.

하고 싶은 일

"이런 요소를 만질 때 만지는 곳의 색깔을 바꾸고 싶어요."
하나하나 클릭하는 게 아니라 손가락으로 그려진 부분의 색깔을 바꾸고 싶어요.
홈 디자인 업데이트
개체를 터치하여 다음 span 태그를 준비하고 CSS로 모양을 만듭니다.
html

<span class="panel">1</span>
<span class="panel">2</span>
 ・・・
<span class="panel">20</span>

(PC)mouseenter 이벤트 처리

$(".panel") 터치 객체의 요소를 가져옵니다.mouseenter 이벤트에서 이벤트 처리 프로그램을 설정합니다.
프로세서에서 터치 대상에class="panel"이 있을 때 배경색을 변경합니다.
(이번 class="green"은 CSS에 배경색을 추가합니다)
js

$().ready(function () {
    $('.panel').on({
        'mouseenter': function () {
            var target = $(this);
            if (target.hasClass('panel')) {
                target.addClass('green');
            }
        }
    });
});

마우스를 만지는 순간 이 요소의 색깔이 변한다.

컴퓨터가 넉넉하다

(스마트폰)touchstart,touchend,touchmove 등→×

touchstart,touchend,touchmove 등 사건이 발생할 때의 요소를 가져오려고 시도합니다.
프로세서의 설명 "var target=$(this);"그 중에서 얻을 수 있는 것은 터치 순간의 요소다.
따라서 스마트폰에서 손가락을 낄 때의 요소 색깔은 변하지만 손가락을 놓지 않고 화면에서 움직여도 target은 변하지 않는다.
js

$().ready(function () {
 $('.panel').on({
        'touchmove': function (event) {
            var target = $(this);
            if (target.hasClass('panel')) {
                target.addClass('green');
            }
        }
    });
});

또한 이벤트 대상이 가지고 있는 이벤트.original Event의 changed Touches,current Target,target,target Touches,touches,... 등에서 손가락으로 만지는 DOM을 얻지 못해 결과가 같다.
js

$().ready(function () {
 $('.panel').on({
        'touchmove': function (event) {
            var target = event.XXXXXXX;
            if (target.hasClass('panel')) {
                target.addClass('green');
            }
        }
    });
});

(스마트폰)touchmove+position+elementFromPoint → ○

반복 시험의 결과
"touchmove 이벤트 처리 프로그램에서 이벤트가 발생한 위치를 얻고 이 위치의 요소를 얻습니다."
그게 해결됐어.
터치무브 이벤트는 터치 장치의 화면을 손가락으로 묘사할 때 연속적으로 발생한다.
이때,document.elementFromPoint(X, Y)에 전달합니다.
이로써 지정된 좌표상의 요소를 얻을 수 있다
js

$().ready(function () {
    $('.panel').on({
        'touchmove': function (event) {
            var touch = event.originalEvent.touches[0];
            var target = $(document.elementFromPoint(touch.clientX, touch.clientY));

            if (target.hasClass('panel')) {
                target.addClass('green');
            }
        }
  });

총결산

최종적으로 다음과 같이 마우스엔터,touchmove 활동에서 각각 처리 프로그램을 설정함으로써 PC든 스마트폰이든 연속 터치 이벤트를 얻을 수 있다.
js

$('.panel').on({
    'mouseenter': function () {
        var target = $(this);
        if (target.hasClass('panel')) {
            target.addClass('green');
        }
    },
    'touchmove': function (event) {
        var touch = event.originalEvent.touches[0];
        var target = $(document.elementFromPoint(touch.clientX, touch.clientY));

        if (target.hasClass('panel')) {
            target.addClass('green');
        }
    }
});

활동을 제어할 때는 좌표에서 접근하기 어려우므로 주의해야 한다.

견본