HTML 페이지의 터치 이벤트 및 마우스 이벤트

Question

1) 아주 일반적인 HTML5 웹 사이트를 구축 중입니다.

이 웹 사이트에는 클릭 가능한 요소가 거의 없습니다. 그것들은 다중 레이어 div에 내장되어 있습니다. 내가 몇 클릭 버튼이

%body 
    #root 
    #content 
    #header 
    #footer 

내 사업부 #content에서 :

HAML으로 보이는 말. 드래그 가능한 요소들. 그리고 비디오 플레이어.

은 - click, mousemove, mouseenter로 마우스 이벤트>이 메이크업 사용 ...

2) 나는를 추가 할 때까지이

다 괜찮 터치 제스처 감지 기능을 추가 해요 레이어 (div)를 터치하여 제스처를 잡습니다. 창의

%body 
    #root 
    #content 
    #header 
    #footer 
    #touch-area 

이 #touch-area 크기 touchstart, touchmove 통해 사용자의 터치 동작을 해석 할 수있다 touchstop

3) 식 :

그러면 I이 획득! 하지만 마우스 이벤트

이 건설 문제는 내가 CSS

를 통해

3.1) 몇«해킹을»시도한 모든 마우스 이벤트가 #touch-area

에 의해 잡힌 입니다 제어를 잃어버린거야

pointer-events: none to #touch-area 터치 이벤트를 동시에 비활성화하십시오.

3.2) JS에서 무엇이 가능합니까?

독서 Click through div. 그 사람이 click 청취자를 최고 div에 추가하십시오. 이 div 숨기기. 이벤트를 다시 트리거하십시오. div를 다시 표시하십시오.

그것은 작동하지만 수 :

• 을 그것이 내가 할 수하고자하는 모든 이벤트를 지정했습니다 jQuery를
• 을 사용하는 패스 쓰루 내 #touch-area

3.3) 좋아, 그럼 mousemove에 집중하자

그래서이 내용은 post about HTML5 and touchscreen입니다.하지만

1. touchstart 
2. touchmove 
3. touchend 
4. mouseover 
5. mousemove 
6. mousedown 
7. mouseup 
8. click 

그리고 I : 그리고 나는이 흥미로운 이벤트 순서를 발견

• 먼저 내가 #touch-area에 mousemove listenner를 추가합니다. 내가 어디 숨 깁니다 #touch-area.
• 모든 이벤트가 진행됩니다.
• 및 측면에 몇 초 후에 #touch-area을 표시하는 시간 초과 루틴을 추가합니다. 다시 터치 이벤트를 잡으려고.

하지만 ... 터치 스크린을 스 와이프하면. 처음에는 거의 감지하지 않습니다 mousemove. 그런 다음 시퀀스 touchstart, touchmove, touchstop이 해고됩니다.

mouse enter 
1490656039478 
mouse move 
1490656039479 
mouse enter 
1490656039483 
mouse move 
1490656039484 
touch start 
1490656039485 
touch move 
1490656039492 
touch move 
490656039498 

(이벤트 시간 다음 이벤트 이름) ... 만이 : 내 손가락을 때

#touch-area에 이벤트 로그를 시작 touch move까지 touch stop

내 계획이 깨졌습니다 그래서 : (

4) stackoverflow 나를 도울 수 있습니까?

어떻게 터치 동작을 잡고 정상 클릭 할 수있는 버튼을 잡을 수 있습니까?

Answer 1

터치 지원 장치를 선택하고 # touch-area div를 동적으로 삽입하는 것만으로도 어떨까요?

장치가 기능 x를 지원하는지 평가하기위한 내 goto 솔루션은 https://modernizr.com/입니다. 여기

는 터치 이벤트를 지원하는 장치를 식별에 모더 나이저를 사용하는 간단한 소개, 그리고 그렇지 않은 사람들은 : http://www.hongkiat.com/blog/detect-touch-device-modernizr/

Answer 2

이 jQuery를 사용하지 않고, 클릭 수는 #touch-area를 통과 할 수 있습니다 :

let touchArea = document.getElementById('touch-area'); 
touchArea.onclick = function(e){ 
    touchArea.style.display = 'none'; 
    document.elementFromPoint(e.clientX, e.clientY).click(); 
    touchArea.style.display = 'block'; 
    return false; 
} 

작동 example. 그것이 click s에서 작동하는 동안, 호버로 작동하는 것은 완전히 다른 문제이며 솔직히 말해서, 나는 당신이 그것을 어떻게 달성 할 수 있었는지 전혀 모른다.