hammerjs 입력 유형 검색 범위 모바일 사파리에서 사용할 수없는 스 와이프 감지

Question

오른쪽으로 스 와이프하고 싶은 작은 메뉴가있는 웹 앱을 개발 중입니다.

그래서 hammerjs는 문서 본문에 스 와이프를 추가하고 왼쪽 스 와이프에서 테 사이드 메뉴를 스 와이프하고 오른쪽 스 와이프에서 다시 스 와이프합니다. 매력처럼 작동합니다.

이제 슬라이더를 움직일 수없는 hammerjs 스 와이프 감지 기능을 추가하면 페이지에 slider()가 생깁니다. 파이어 폭스에서 슬라이더가 느려지고 때로는 멈 춥니 다.

hammerjs 감지를 제거하면 슬라이더가 예상대로 작동합니다. 아무도 hav 문제를 해결할 수있는 단서가 있습니까?

는 HTML

<div id="container"> 
    <input id="slide" type="range" min="0" max="100" value="100"> 
</div> 
<div id="text"> 
</div> 

JS

var mc = new Hammer.Manager(document.getElementById('container')); 
mc.add(new Hammer.Swipe({ 
    direction: Hammer.DIRECTION_HORIZONTAL 
})); 

var textElement = document.getElementById('text'); 
textElement.innerHTML= 'noSwipe'; 
mc.on('swipe', function (e) { 
    textElement.innerHTML = 'swipe'+e.direction;  
}); 

CSS

#container { 
    width:100%; 
    height:200px; 
    border: 1px solid blue; 
} 

I've은,122,672,898했다 문제를 보여주는.

Answer 1

같은 문제가 있었기 때문에 터치 이벤트의 버블 링을 방지하는 데 도움이되었습니다.

var stop = function(event) { 
    event.stopPropagation(); 
}; 
$element.on('touchmove', stop); 
$element.on('touchstart',stop); 
$element.on('touchend', stop); 

사실 '터치 이동'을 방지하기에 충분하지만 안정성을 위해 '시작'과 '끝'을 추가했습니다.