如何檢測瀏覽器是否支持鼠標懸停事件？

Question

假設我有一個網頁，它有一些 onmouseover javascript 行為來下拉菜單（或類似的東西）

顯然，這不適用於 iPad 或智能手機等觸控設備。

如何檢測瀏覽器是否支持懸停事件，如 onmouseover 或 onmouseout 以及 CSS 中的 :hover 偽標簽？

注意：我知道如果我對此感到擔心，我應該以不同的方式編寫它，但我很好奇是否可以進行檢測。

編輯：當我說“支持懸停事件”時，我的意思是“瀏覽器是否對懸停事件具有有意義的表示”。 如果硬件支持而軟件不支持（反之亦然），則沒有有意義的表示。 除了一些即將到來的技術，我認為任何觸摸設備都沒有有意義的懸停事件表示。

Answer 1

此方法捕獲更多設備/瀏覽器

try {
   document.createEvent("TouchEvent");
   alert(true);
}
catch (e) {
   alert(false);
}

閱讀更多

Answer 2

var supportsTouch = (typeof Touch == "object");

只需檢測它是否是觸摸設備，然后執行您的特殊操作即可。 這是最簡單的方法，因為大多數觸摸設備模擬鼠標事件，但沒有鼠標驅動設備模擬觸摸事件。

更新：考慮到現在有多少設備以及Johan的評論，我建議只使用Modernizr 。

Answer 3

現在是 2016 年，許多設備都具有觸摸和類似鼠標的輸入已有好幾年了。 “Can't touch”不是判斷“Can mouseover”的好方法。 舉幾個例子：

• “有源筆”數字化設備，如 Galaxy Note 手機和平板電腦 (Android)、Microsoft Surface (Windows) 和 Wacom Cintiq (Mac/Windows/Android)，我相信 iPad Pro 也是如此，它的筆像鼠標一樣工作並且可以“空中懸停”距離屏幕約 1 厘米時
• Windows 筆記本電腦/帶觸摸屏的混合動力車和普通筆記本電腦觸控板等
• 可以連接到任何 PC 並與鼠標一起使用的觸摸屏顯示器

因此，用戶可能無法懸停一分鍾，然后，在同一設備上，不刷新頁面，他們將筆從 Galaxy Note 中拔出，並且（假設它沒有着火）他們突然在交互中使用懸停，他們希望它能夠正常工作。

---

如果您需要知道您的用戶 a) 是否可以使用並且 b) 當前正在使用使他們能夠方便地移動鼠標的設備，您可以：

• 如果觸發鼠標移動的光標正在移動，則將mousemove事件綁定到您的文檔body ，該事件激活“已懸停”狀態（例如，將類user-can-mouseover到body ），然后立即解除綁定，使其只發生一次。
• 同時綁定一個touchstart暫時停用該事件mousemove和touchend是重新激活它，這樣，在瀏覽器上觸發式鼠標事件（在Android和Windows很常見），正常觸摸滾動不會觸發mousemove 。
• 讓mousemove事件解除這些touchstart和touchend事件的綁定， touchend進行良好的管理

這將導致在用戶開始使用行為類似於鼠標的輸入設備時觸發“可以懸停”狀態。

---

以混合設備為例：

1. 最初，用戶正在使用觸摸和滑動來瀏覽網頁。
2. 他們到達您的應用程序，使用觸摸上下滑動，同時了解它是什么。 到目前為止，“可以懸停”條件尚未激活。
3. 他們認為這是他們想要比他們的胖手指所允許的精度更高的情況之一，因此他們拔出數字化筆或伸手去拿鼠標。
4. 這會導致光標在頁面上移動而沒有發生無休止的觸摸事件，因此您的“可以懸停”條件被觸發

...並使用鼠標獲取老式桌面工作站：

1. 頁面加載。
2. 用戶在做任何事情時移動鼠標，立即觸發鼠標移動事件
3. 立即觸發“可以懸停”狀態

Answer 4

基於 user568458 的響應的一組功能，允許您打開/關閉觸摸設備的 :hover 樣式（我還沒有在所有設備上嘗試過）：

function detectMouseMove() {
    $(document).one('mousemove', function() { 
        $('body').addClass('hoverActive');
        detectTouchEvent();
    });
}
function detectTouchEvent() {
    $(document).one('touchstart', function() { 
        $('body').removeClass('hoverActive');
        detectMouseMove();
    });
}

然后，您可以在任何 :hover 選擇器之前在樣式表中使用 .hoverActive 以防止移動瀏覽器嘗試顯示懸停狀態。

Answer 5

非傳統瀏覽器的另一種方法是利用媒體查詢懸停和任意懸停

matchMedia('(hover: hover)').matches; // Primary device can hover

matchMedia('(hover: none)').matches; // Primary device cannot hover

matchMedia('(any-hover: hover)').matches; // At least one of the connected devices can hover

matchMedia('(any-hover: none)').matches; // None of the connected devices can hover