Làm cách nào để phát hiện xem trình duyệt có hỗ trợ các sự kiện di chuột không?

Question

Giả sử tôi có một trang web có một số hành vi javascript onmouseover để thả xuống một menu (hoặc một cái gì đó tương tự)

Rõ ràng, điều này sẽ không hoạt động trên thiết bị cảm ứng như iPad hoặc điện thoại thông minh.

Làm cách nào để phát hiện xem trình duyệt có hỗ trợ các sự kiện di chuột như onmouseover hoặc onmouseout và: pseudotag hover trong CSS không?

Lưu ý: Tôi biết rằng nếu tôi lo ngại về điều này, tôi nên viết nó theo một cách khác, nhưng tôi tò mò muốn phát hiện có thể thực hiện được hay không.

Chỉnh sửa: Khi tôi nói, "hỗ trợ sự kiện di chuột", tôi thực sự muốn nói, "trình duyệt có biểu diễn có ý nghĩa về các sự kiện di chuột không". Nếu phần cứng hỗ trợ nó nhưng phần mềm không (hoặc ngược lại), không có đại diện có ý nghĩa. Ngoại trừ một số upcoming tech, tôi không nghĩ rằng bất kỳ thiết bị cảm ứng nào có đại diện có ý nghĩa của sự kiện di chuột.

Answer 1

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

Chỉ phát hiện nếu đó là thiết bị cảm ứng và sau đó thực hiện công cụ đặc biệt của bạn. Đây là phương pháp đơn giản nhất vì hầu hết các thiết bị cảm ứng mô phỏng sự kiện chuột nhưng không có thiết bị điều khiển chuột nào mô phỏng các sự kiện chạm.

Cập nhật: Xem xét số lượng thiết bị hiện có một ngày và các nhận xét của Johan Tôi khuyên bạn chỉ nên sử dụng Modernizr.

Answer 2

Phương pháp này bắt nhiều thiết bị hơn/trình duyệt

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

Read more

Answer 3

Đó là năm 2016 và rất nhiều thiết bị có cả cảm ứng và đầu vào chuột giống như nhiều năm nay. "Không thể chạm" là không một cách hay để đánh giá "Có thể di chuột qua". Để cung cấp chỉ là một vài ví dụ:

• "Active pen" digitizer devices như điện thoại Galaxy Note và máy tính bảng (Android), Microsoft Surface (Windows) và Wacom Cintiq (Mac/Windows/Android), và tôi tin rằng iPad Pro quá, nơi bút hoạt động giống như một con chuột và có thể "di chuột không khí" khi xung quanh 1cm từ màn hình
• của Windows máy tính xách tay/lai với màn hình cảm ứng cộng và trackpads laptop convential vv
• màn hình màn hình cảm ứng có thể được gắn vào bất kỳ máy tính và sử dụng với một con chuột

Vì vậy, người dùng có thể không sử dụng được le để di chuột một phút, sau đó, trên cùng một thiết bị, mà không làm mới trang, họ kéo bút ra khỏi Galaxy Note của họ và (giả sử nó không bắt lửa) họ đột nhiên là bằng cách di chuột trong tương tác của họ và hy vọng nó sẽ hoạt động.

---

Nếu bạn cần phải biết nếu người dùng một của bạn) thể sử dụng và b) hiện là sử dụng một thiết bị cho phép họ điều thuận tiện mousover, bạn có thể:

• Liên kết sự kiện mousemove với tài liệu của bạn body kích hoạt trạng thái "đã di chuột" (ví dụ: thêm một lớp user-can-mouseover) vào con trỏ chuột di chuyển chuột, và sau đó ngay lập tức hủy liên kết f nên nó chỉ xảy ra một lần.
• Đồng thời ràng buộc sự kiện touchstart tạm thời hủy kích hoạt mousemove và touchend kích hoạt lại nó, để trên trình duyệt kích hoạt sự kiện chuột khi chạm (khá phổ biến trên Android và Windows), chạm thông thường sẽ không kích hoạt mousemove.
• Có trường hợp mousemove unbind những touchstart và touchend sự kiện vệ sinh tốt

này sau đó sẽ gây ra "có thể di chuột" trạng thái được kích hoạt bất cứ lúc nào người dùng bắt đầu sử dụng một thiết bị đầu vào mà cư xử như một con chuột.

---

Ví dụ, lấy một thiết bị lai:

1. Ban đầu, người dùng đang duyệt web bằng chạm và vuốt.
2. Họ truy cập vào ứng dụng của bạn, vuốt lên và xuống bằng cách sử dụng cảm ứng khi hiểu nó là gì. Cho đến nay, điều kiện "có thể di chuột" không hoạt động.
3. Họ quyết định đây là một trong những trường hợp mà họ muốn độ chính xác cao hơn ngón tay béo của họ cho phép, vì vậy họ kéo bút số hóa hoặc tiếp cận với con chuột của họ.
4. Điều này làm cho con trỏ để di chuyển trên trang mà không một sự kiện liên lạc unended đã xảy ra, vì vậy bạn "có thể di chuột" điều kiện được kích hoạt

... và dùng một máy trạm máy tính để bàn cũ-trường với chuột:

1. Trang tải.
2. Người dùng di chuyển chuột trong khi làm bất cứ điều gì, ngay lập tức kích hoạt các sự kiện chuột di chuyển
3. Các "có thể di chuột" trạng thái được kích hoạt ngay lập tức

Answer 4

Set chức năng dựa trên phản ứng user568458 của cho phép bạn bật/off: di chuột phong cách cho các thiết bị cảm ứng (tôi đã không thử nó trên tất cả các thiết bị):

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

Sau đó, bạn chỉ có thể sử dụng .hoverActive trong stylesheet của bạn trước khi bất kỳ: hover selectors để ngăn trình duyệt di động từ cố gắng để hiển thị trạng thái di chuột.