檢測瀏覽器的功能和選擇性事件的鼠標和觸摸

我開始使用觸摸事件了一段時間了，但我偶然發現了一個相當大的問題。到現在爲止，我檢查了是否支持觸摸功能，並基於此選擇了應用選擇性事件。像這樣：檢測瀏覽器的功能和選擇性事件的鼠標和觸摸

if(document.ontouchmove === undefined){ 
    //apply mouse events 
}else{ 
    //apply touch events 
}

但是，我的腳本在我的電腦上停止了Chrome5（目前是測試版）的工作。我研究了一下，正如我預期的那樣，在Chrome5中（與舊的Chrome，Firefox，IE等相反）document.ontouchmove不再是undefined，而是null。

起初我想提交一個錯誤報告，但後來我意識到：有些設備同時具有鼠標和觸摸功能，所以這可能很自然，也許Chrome現在定義了它，因爲我的操作系統可能支持這兩種類型的事件。

所以解決方案看起來很簡單：應用BOTH事件類型。對？

那麼現在的問題發生在手機上。爲了向後兼容並支持僅使用鼠標事件的腳本，移動瀏覽器可能會嘗試觸發它們（觸摸）。因此，隨着鼠標和觸摸事件的設置，每次可能會調用某個處理程序兩次。

解決這個問題的方法是什麼？有沒有更好的方法來檢查和應用選擇性事件，還是我必須忽略瀏覽器有時觸發觸摸和鼠標事件時可能發生的問題？

來源

2010-05-07 treznik

我無法測試，但會在觸摸事件中返回false取消其默認行爲（觸發向後兼容的鼠標事件？） – gnarf 2010-06-18 13:19:31

嘗試創建一個虛擬元素並將觸摸事件處理程序附加到它，然後檢查處理程序是否爲「function」類型。這並不是萬無一失的，儘管一些瀏覽器可以允許觸摸事件處理程序，儘管它們是在非觸摸設備上運行的 - 但它可能會盡可能地接近您。所以，像這樣：

var hasTouch = function() { 
    var dummy = document.createElement("div"); 
    dummy.setAttribute("ontouchmove", "return;"); 
    return typeof dummy.ontouchmove == "function" ? true : false; 
}

快樂的編碼！

來源

2010-05-20 00:47:21

在hasTouch後放置一個（），所以它將是一個布爾值，並且會只能執行一次:) – 2010-06-16 16:24:55

嘗試禁用鼠標事件，如果觸摸事件觸發？

例如爲：

  
function touch_events() { 
document.onmousemove = null; 
... 
} 

function mouse_events() { ... } 

document.ontouchmove = touch_events; 
document.onmousemove = mouse_events;

來源

2010-06-16 16:21:17

這是太明顯了？

if(document.ontouchmove !== undefined || document.ontouchmove == null){ 
    //apply touch events 
}else{ 
    //apply mouse events 
}

來源

2010-06-18 00:49:22 Phil

或者可能'if（... ontouchmove！== undefined && typeof（... ontouchmove）== function）{...} – scunliffe 2010-06-22 15:39:13

var support_touch =（typeof Touch ==「object」）;

來源

2010-11-01 23:56:34 Anthony

與Ola的答案類似，我發現只是一個簡單的檢測工作，但我也發現，特別是古怪的Android設備（如野火）並不總是有這個事件定義 - 這對我很好用：

//detect capabilities 
this.is_touch_device = ('ontouchstart' in document.documentElement) || (navigator.userAgent.match(/ipad|iphone|android/i) != null); 

//if so do somemthing 
if (this.is_touch_device) { 
    //like publishing a custom event 
}

（可能是這樣做的更好的辦法:)

來源

2011-12-12 08:19:47

難道我犯了這個錯誤，還是每一個崗位，到目前爲止在這裏回答你沒有問一個問題嗎？至少你現在有很多替代方法來檢查支持的事件:)

無論如何，關於你的問題：我會說這取決於你在建什麼。我認爲當你寫「基於這個應用選擇性事件」時，你的意思是添加事件監聽器和 - 處理程序？另外我假設你不處理多點觸控（還）？

一般來說，如果您希望您的應用程序使用兩種輸入事件類型，那麼您沒有選擇，只能爲所有這些類型註冊偵聽器。您可能已經使用了touchstart和mousedown的相同處理程序，所以這是我確保在後續的相同事件中只有一個被實際處理（以節省CPU週期和重繪以及避免可能的副作用）的地方。我可以看到我的10級（2.3.3）手機產生了兩個事件 - 鼠標事件，所以「經典」網絡（所有這些onmousedown事件等等）。 ..）將起作用，觸摸事件......好吧，因爲它顯然是觸摸設備。但只檢查JavaScript API是否支持TouchEvents並不會告訴你有關輸入設備的任何信息，例如：kubuntu桌面上的rekonq瀏覽器對於上述示例返回true，但除非與觸摸屏一起使用，否則它絕不會觸發它們。

也許通過window.navigator.userAgent告訴設備是一種更可行的方法？

來源

2012-06-24 04:29:52 Philzen

檢測瀏覽器的功能和選擇性事件的鼠標和觸摸

回答

相關問題