html頁面中的觸摸事件和鼠標事件

1）我正在構建一個非常普通的HTML5網站。html頁面中的觸摸事件和鼠標事件

在這個網站上有幾個可點擊的元素。這些嵌入在多層div中。

HAML來說它看起來：

%body 
    #root 
    #content 
    #header 
    #footer

在我的div #content我有幾個可點擊按鈕。一些可拖動的元素。和視頻播放器。

- >這讓使用鼠標事件爲click，mousemove，mouseenter ...

2）我加入了觸摸手勢檢測

一切都很好，直到我要添加層（一個div）捕捉觸摸手勢。

然後我獲得該：

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

這#touch-area尺寸窗口的能夠經由touchstart，touchmove解釋用戶的觸摸手勢，touchstop

3）冷卻！但我失去鼠標事件

這種結構的問題是所有的鼠標事件是由#touch-area

抓住我通過CSS

試過幾個«黑客»

3.1）的控制

將pointer-events: none加到#touch-area同時禁用觸摸事件。

3.2）在JS中有什麼可能？

閱讀Click through div。這傢伙增加了一個click聽衆的頂部股利。隱藏這個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

我雖然：

首先我添加mousemove listenner到#touch-area。我在哪裏隱藏#touch-area。
然後所有事件都會通過。
和另一方面，我添加了一個超時例程，在幾ms後顯示#touch-area。這再次捕捉觸摸事件。

但是......當我在觸摸屏上滑動。它首先檢測到幾個mousemove。然後序列touchstart,touchmove,touchstop被解僱。

開始事件的日誌上#touch-area當我刷我的手指：

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

（後面事件時間事件名稱）...然後只是有touch move直到touch stop

所以我的計劃是壞的:(

4）stackoverflow你能幫我嗎？

如何讓頂層能夠捕捉觸摸手勢和正常的可點擊按鈕？

來源

2017-03-27 mickro

mikro，我真的非常感謝你在編寫你的問題時付出的努力，但至少對我而言，你並不清楚你在問什麼。我不認爲我應該閱讀所有鏈接的資源才能理解這一點。你能否清楚說明你想達到的目標？用20字還是更少？如果您認爲它可以幫助您理解問題，也許還可以提供[mcve]？ –

你想不使用jQuery而使用['functionality']（http://stackoverflow.com/a/18642544/1891677）嗎？這會回答你的問題嗎？ –

我明白了。這就是爲什麼我試圖在第4點提出一個「簡單」的問題。複雜性在第2點暴露的背後。足夠接近我相信「最小例證」。爲了完成我描述我在第3點的嘗試。 – mickro

爲什麼不簡單地檢查設備的觸摸支持，只有動態插入＃touch-area div？

我用來評估設備是否支持x功能的解決方案是https://modernizr.com/。

這裏有一個快速的介紹使用Modernizr的識別，支持觸摸事件的設備，以及那些不這樣做：http://www.hongkiat.com/blog/detect-touch-device-modernizr/

來源

2017-03-27 22:19:14

我不會爲觸摸設備動態添加＃touch-aera，因爲所有「tap」/「click」都在下面描述。我甚至需要使用觸摸設備。但是這個想法就在那裏。當它不是特定的手勢（滑動，平移）時，我試圖隱藏＃觸摸區域。 – mickro

這將允許點擊通過#touch-area，而無需使用jQuery：

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; 
}

Working example。雖然它適用於click s，但將它用於懸停是一件完全不同的事情，坦率地說，我不知道如何實現這一點。

來源

2017-03-27 22:32:49

不錯:)但是，這不包括懸停事件顯示給用戶什麼是可點擊通過指針和有時視覺強調。這就是爲什麼我更關注'mousemove'。無論如何，迄今爲止最好的選擇。謝謝。 – mickro

html頁面中的觸摸事件和鼠標事件

回答

相關問題