2013-05-07 35 views
2

在我們的頁面上,我們有一個長水平滾動的iframes <div>。如果用戶使用鼠標,他們可以滾動滾動條,我們希望他們能夠在iframe中選擇文本。如果他們只是使用觸摸,但是,滾動條很麻煩,我想覆蓋整個事物的透明元素,讓他們能夠通過拖動輕鬆滾動,這當然犧牲了選擇文本功能,但是有意義的那種情況。可靠地檢測用戶是否在網頁上使用鼠標?

這讓我想到我的問題,有沒有辦法可靠地檢測用戶是否通過鼠標與網頁進行交互?

我在檢測觸摸或鼠標時看到的一切都是觸摸將廣播鼠標事件,因此很難檢測到觸摸或鼠標(更不用說可以同時使用)。我的問題更簡單 - 用戶是否通過鼠標與頁面交互。

任何人都可以想出一種方法來檢查這種可靠嗎?

回答

2

鼠標可以做一件觸摸設備永遠不會做的事情 - 移動時不需要按任何按鈕。所以我只是在頁面加載時安裝一個onMouseMove事件,如果它觸發沒有按鈕按下標記用戶作爲鼠標用戶。然後,您可以通過Cookie或LocalStorage來堅持這一點,因爲該標誌不會在相同的環境中更改,並立即刪除該事件。實現單火事件的確切方式取決於你使用的庫(如果有的話),但是使用Mootools/JQuery文檔應該很容易。

總的來說,我建議你只檢查在大多數情況下,觸摸界面的更容易的途徑:

if('ontouchstart'in window) 
{ 
    /* it's a touch device */ 
} 
+0

哦,良好的通話。現在就試試看。對於你的其他方法,我相信我已經讀過規範指出'ontouchstart'也應該存在於非觸摸設備上(儘管當然在很多當前版本中情況並非如此,我無法找到我讀的地方)。對於鼠標和觸摸都可用的情況,它也不會有太大的幫助。 – 2013-05-07 17:15:56

+1

真棒,有用,這是一個實現http://jsbin.com/eyotuz/3/edit – 2013-05-07 17:32:13

+0

我建議你非常小心,我知道很多人正在用手指在觸摸設備上「懸停」 。這意味着他們在觸摸屏幕之前檢測手指(預定位),這可能會在釋放這些設備時以鼠標移動的方式進行轉換。 – nraynaud 2013-05-08 19:16:11

相關問題