2016-04-23 259 views
0

我有一個默認情況下隱藏的元素,並顯示當用戶鼠標懸停在這個元素上。在觸摸屏上,只有在輕擊元素時纔會觸發此事件。當我的手指觸及那個元素時,我正在尋找的是一種讓這個節目的方式,我似乎無法找到像這樣的事件。事件觸摸屏輕輕觸摸

我曾嘗試下面的代碼:

//OnTouch event for about text 
$('#about thumbnail').on('touchstart', function(){ 
    $(this).find('.mask').addClass('touch'); 
}).on('touchend', function(){ 
    $(this).find('.mask').removeClass('touch'); 
}); 

沒有成功要麼,我有默認的WordPress的jQuery的包括在內,我需要一個額外的庫使我的工作?我無法找到如何做到這一點。

謝謝你們!

回答

4

只要您沒有爲最新的具有3D觸控功能的Apple iPhone進行開發,您就無法檢測到輕微和難以接觸的觸摸。每個觸摸輸入都被視爲點擊。但您可以嘗試減少響應時間延遲。 使用此庫http://hammerjs.github.io/它有能力克服手機瀏覽器中的500ms鎖定。 如果您減少響應時間,它可以稍微模擬您所要求的輕微觸摸。

更新:這裏是這裏面提供了更多的活動,如 水龍頭,單自來水,雙擊,按住另一個庫,2個手指輕按,2X雙擊,刷卡拖動,旋轉,捏,捏放,手指 http://quojs.tapquo.com

+0

感謝您的輸入! aan'tap'(屏幕上的手指和lift手指)和touchstart(屏幕上的手指)之間有區別嗎?請參閱我編輯的問題 –

+0

您是否檢出了我提供的鏈接?可能會有幫助。 –

+0

@BorisKamp我忘了這件事。 http://quojs.tapquo.com/它具有多個事件支持,例如點擊單擊雙擊雙擊雙擊手指點擊雙擊雙擊滑動拖動旋轉雙指捏出手指。 –

0

我忘了回到這裏,但發現了一個解決方案,實現在觸摸設備上的懸停效果。

你可以做什麼:

1->通過觸摸一個touchdevice對象實現懸停效果,直到您激活另一個懸停效果這個懸停效果保持活躍。您可以通過「touchstart」綁定到任何物體,像這樣做:

$('body .archive-item').bind('touchstart', function() {}); 

我沒有找到一種方法,只要你的手指與上述功能的觸摸屏的獲取停止懸停。

2->可以綁定touchstarttouchend上面的選擇,讓他們對touchstartremoveClassaddClasstouchend

$('body .archive-item').bind('touchstart', function() { 
    $(this).addClass('hover'); 
}); 
$('body .archive-item').bind('touchend', function() { 
    $(this).removeClass('hover'); 
}); 

現在你可以用CSS樣式的.archive-item.hover實現懸停效果。

爲了避免重複CSS實現對:hover懸停效果,你可以做到這一點的touchstart

.archive-item:hover, 
.archive-item.hover { 
    text-decoration: underline; 
    color: red; 
} 

我無法找到網絡上的任何東西,所以這是我想通了,通過合併一些來自各種片段的代碼,你們對此有何看法?