htmlページのタッチイベントとマウスイベント

Question

1）私は非常に普通のHTML5ウェブサイトを構築しています。

このウェブサイトには、クリック可能な要素はほとんどありません。それらはマルチレイヤーdivに組み込まれています。

HAMLように見える話す：私はいくつかのクリック可能なボタンを持っている私のdiv #contentで

%body 
    #root 
    #content 
    #header 
    #footer 

。いくつかのドラッグ可能な要素。そしてビデオプレーヤー。

からclick、mousemove、mouseenterなどのマウスイベントの>このメイク使用...

2）私は追加したいまで

すべては大丈夫ですタッチジェスチャ検出を追加していますレイヤー（div）でタッチジェスチャーをキャッチします。冷却）、ウィンドウのこの#touch-areaサイズはtouchstartを介してユーザのタッチジェスチャを解釈することが可能である

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

touchmove、touchstop

3：

その後、私はこれを取得！私はマウスイベント

この構成の問題は、私はCSS

経由

3.1）少数«ハックを»試したすべてのマウスイベントが#touch-area

によってキャッチされでのコントロールを失いますよ

追加pointer-events: none~#touch-area同時にタッチイベントを無効にします。

3.2）JSでは何が可能ですか？

読書Click through div。男はclickリスナをトップdivに追加します。このdivを非表示にします。イベントを再トリガーします。 divを再表示します。

それは仕事ができる

しかし：

• それはjQueryの
• を使用し、私は私が私の#touch-area

3.3トラフ渡すようにしたいすべてのイベントを指定するためにしました）[OK]を、のはmousemoveに焦点を当ててみましょう

だから私はこれを読んだpost about HTML5 and touchscreen。しかし

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

と私：そして、私はこの興味深いイベントの順序を見つけ

• まず私は#touch-areaへmousemove listennerを追加します。私が隠す場所#touch-area。
• すべてのイベントは実行されます。
• およびの場合は、タイムアウトルーチンを追加して、数ms後に#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）私を助けることができますか？

トップレイヤーでタッチジェスチャーを捕らえ、通常のクリック可能なボタンを鳴らす方法を教えてください。

Answer 1

単にタッチサポートのデバイスをチェックし、＃touch-area divを動的に挿入してみませんか？

デバイスがフィーチャxをサポートしているかどうかを評価するための私のgoto解決策はhttps://modernizr.com/です。

は、ここでタッチイベントをサポートするデバイスを識別することにModernizrを使っへの迅速なイントロだし、そうでないもの：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の場合は動作しますが、ホバーのために動作させることはまったく別の問題であり、率直に言って、どうやってそれを達成できるかはわかりません。