Phát hiện các thiết bị màn hình cảm ứng bằng Javascript

Trong Javascript / jQuery, làm cách nào tôi có thể phát hiện nếu thiết bị khách có chuột?

Tôi đã có một trang web trượt lên một bảng thông tin nhỏ khi người dùng di chuột qua một mục. Tôi đang sử dụng jQuery.hoverIntent để phát hiện di chuột, nhưng điều này rõ ràng không hoạt động trên các thiết bị màn hình cảm ứng như iPhone / iPad / Android. Vì vậy, trên các thiết bị đó tôi muốn hoàn nguyên để nhấn để hiển thị bảng thông tin.

+1 để làm hovervà clickcả hai. Một cách khác có thể là sử dụng truy vấn phương tiện CSS và chỉ sử dụng một số kiểu cho màn hình / thiết bị di động nhỏ hơn, đây là những kiểu có nhiều khả năng có chức năng chạm / chạm. Vì vậy, nếu bạn có một số kiểu cụ thể thông qua CSS và từ jQuery, bạn kiểm tra các yếu tố đó cho các thuộc tính kiểu thiết bị di động mà bạn có thể nối vào chúng để viết mã cụ thể cho thiết bị di động.

Xem tại đây: http://www.forabeautitableweb.com/blog/about/hardboiled_css3_media_queries/

var isTouchDevice = 'ontouchstart' in document.documentElement;

Lưu ý : Chỉ vì một thiết bị hỗ trợ các sự kiện cảm ứng không nhất thiết có nghĩa là nó chỉ là một thiết bị màn hình cảm ứng. Nhiều thiết bị (như Asus Zenbook của tôi) hỗ trợ cả các sự kiện nhấp và chạm, ngay cả khi chúng không có bất kỳ cơ chế nhập liệu cảm ứng thực tế nào. Khi thiết kế để hỗ trợ cảm ứng, luôn luôn bao gồm hỗ trợ sự kiện nhấp và không bao giờ cho rằng bất kỳ thiết bị nào là độc quyền của một hoặc khác.

Đã tìm thấy thử nghiệm cho window.Touch không hoạt động trên Android nhưng điều này không:

function is_touch_device() {
  return !!('ontouchstart' in window);
}

Xem bài viết: Cách tốt nhất để phát hiện thiết bị 'màn hình cảm ứng' bằng JavaScript là gì?

return (('ontouchstart' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));

Lý do sử dụng maxTouchPoints cùng với msMaxTouchPoints:

Microsoft đã tuyên bố rằng bắt đầu với Internet Explorer 11, phiên bản tiền tố của nhà cung cấp Microsoft (msMaxTouchPoints) có thể bị xóa và khuyên bạn nên sử dụng maxTouchPoints.

Nguồn: http://ctrlq.org/code/19616-detect-touch-screen-javascript

if ("ontouchstart" in window || navigator.msMaxTouchPoints) {
    isTouch = true;
} else {
    isTouch = false;
}

Hoạt động mọi lúc mọi nơi !!

Tôi sử dụng:

if(jQuery.support.touch){
    alert('Touch enabled');
}

trong jQuery mobile 1.0.1

Google Chrome dường như trả lại dương tính giả trên cái này:

var isTouch = 'ontouchstart' in document.documentElement;

Tôi cho rằng nó có liên quan đến khả năng "mô phỏng các sự kiện chạm" (F12 -> cài đặt ở góc dưới bên phải -> tab "ghi đè" -> hộp kiểm cuối cùng). Tôi biết nó bị tắt theo mặc định nhưng đó là những gì tôi kết nối thay đổi kết quả với (phương thức "trong" được sử dụng để hoạt động trong Chrome). Tuy nhiên, điều này dường như đang hoạt động, theo như tôi đã thử nghiệm:

var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);

Tất cả các trình duyệt tôi đã chạy mã trên nhà nước typeof là "đối tượng" nhưng tôi cảm thấy chắc chắn hơn khi biết rằng đó là bất cứ điều gì nhưng không xác định :-)

Đã thử nghiệm trên IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome cho iPad 21.0.1180.80 và iPad Safari. Sẽ thật tuyệt nếu ai đó thực hiện thêm một số thử nghiệm và chia sẻ kết quả.

Đã viết điều này cho một trong những trang web của tôi và có lẽ là giải pháp hoàn hảo nhất. Đặc biệt là ngay cả Modernizr có thể nhận được dương tính giả khi phát hiện cảm ứng.

Nếu bạn đang sử dụng jQuery

$(window).one({
  mouseover : function(){
    Modernizr.touch = false; // Add this line if you have Modernizr
    $('html').removeClass('touch').addClass('mouse');
  } 
});

hoặc chỉ là JS thuần túy ...

window.onmouseover = function(){ 
    window.onmouseover = null;
    document.getElementsByTagName("html")[0].className += " mouse";
}

Đối với bài đăng / nhận xét đầu tiên của tôi: Tất cả chúng ta đều biết rằng 'touchstart' được kích hoạt trước khi nhấp. Chúng tôi cũng biết rằng khi người dùng mở trang của bạn, họ sẽ: 1) di chuyển chuột 2) nhấp 3) chạm vào màn hình (để cuộn hoặc ... :))

Hãy thử một cái gì đó:

// -> Bắt đầu: jQuery

var hasTouchCapabilities = 'ontouchstart' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? 'maybe':'nope';

//attach a once called event handler to window

$(window).one('touchstart mousemove click',function(e){

    if ( isTouchDevice === 'maybe' && e.type === 'touchstart' )
        isTouchDevice = 'yes';
});

// <- Kết thúc: jQuery

Chúc một ngày tốt lành!

Tôi đã thử nghiệm mã sau đây được đề cập ở trên trong cuộc thảo luận

 function is_touch_device() {
    return !!('ontouchstart' in window);
 }

hoạt động trên Android Mozilla, chrome, Opera, trình duyệt mặc định android và safari trên iphone ... tất cả đều tích cực ...

có vẻ vững chắc đối với tôi :)

Một bài đăng blog hữu ích về chủ đề này, được liên kết từ bên trong nguồn Modernizr để phát hiện các sự kiện chạm. Kết luận: không thể phát hiện đáng tin cậy các thiết bị màn hình cảm ứng từ Javascript.

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

Điều này làm việc cho tôi:

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

Nếu bạn sử dụng Modernizr , nó rất dễ sử dụng Modernizr.touchnhư đã đề cập trước đó.

Tuy nhiên, tôi thích sử dụng kết hợp Modernizr.touchthử nghiệm tác nhân người dùng và để an toàn.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Nếu bạn không sử dụng Modernizr, bạn chỉ cần thay thế Modernizr.touchchức năng trên bằng('ontouchstart' in document.documentElement)

Cũng lưu ý rằng việc kiểm tra tác nhân người dùng iemobilesẽ cung cấp cho bạn phạm vi rộng hơn các thiết bị di động Microsoft được phát hiện hơn Windows Phone.

Cũng xem câu hỏi SO này

Trong jQuery Mobile, bạn chỉ cần làm:

$.support.touch

Không biết tại sao điều này lại không có giấy tờ .. nhưng nó là an toàn chéo (2 phiên bản mới nhất của trình duyệt hiện tại).

Như đã đề cập, một thiết bị có thể hỗ trợ cả đầu vào chuột và cảm ứng. Rất thường xuyên, câu hỏi không phải là "những gì được hỗ trợ" mà là "những gì hiện đang được sử dụng".

Trong trường hợp này, bạn chỉ cần đăng ký các sự kiện chuột (bao gồm cả trình nghe di chuột) và các sự kiện chạm như nhau.

element.addEventListener('touchstart',onTouchStartCallback,false);

element.addEventListener('onmousedown',onMouseDownCallback,false);

...

JavaScript sẽ tự động gọi người nghe chính xác dựa trên đầu vào của người dùng. Vì vậy, trong trường hợp có sự kiện chạm, onTouchStartCallbacksẽ được kích hoạt, mô phỏng mã di chuột của bạn.

Lưu ý rằng một cú chạm có thể kích hoạt cả hai loại người nghe, chạm và chuột. Tuy nhiên, trình nghe cảm ứng đi trước và có thể ngăn người nghe chuột tiếp theo bắn bằng cách gọi event.preventDefault().

function onTouchStartCallback(ev) {
    // Call preventDefault() to prevent any further handling
    ev.preventDefault();
    your code...
}

Đọc thêm ở đây .

Để phát triển iPad tôi đang sử dụng:

  if (window.Touch)
  {
    alert("touchy touchy");
  }
  else
  {
    alert("no touchy touchy");
  }

Sau đó, tôi có thể liên kết có chọn lọc với các sự kiện dựa trên cảm ứng (ví dụ: ontouchstart) hoặc các sự kiện dựa trên chuột (ví dụ: onmousedown). Tôi chưa thử nghiệm trên Android.