我在这里使用Hammer.js:
http://eightmedia.github.io/hammer.js/
我像这样设置/创建Hammer对象:
var hammertime = Hammer(document.body)
.on("pinchin drag swipe", function(event) {
var alpha_value = $( "#collide_alpha" ).slider( "option", "value" );
var beta_value = $( "#collide_beta" ).slider( "option", "value" );
if(alpha_value < 50) {
$( "#collide_alpha" ).slider( "value", ~~(+alpha_value+(event.gesture.distance/30)) );
} else if(alpha_value <= 100) {
$( "#collide_alpha" ).slider( "value", ~~(+alpha_value-(event.gesture.distance/30)) );
}
if(beta_value < 50) {
$( "#collide_beta" ).slider( "value", ~~(+beta_value+(event.gesture.distance/30)) );
} else if(beta_value <= 100) {
$( "#collide_beta" ).slider( "value", ~~(+beta_value-(event.gesture.distance/30)) );
}
});
之后,我试着这样做:
// Try to disable the mouse movements on computer
hammertime.STOP_MOUSEEVENTS = true;
hammertime.NO_MOUSEEVENTS = true;
但这不起作用,那么我应该如何为计算机禁用事件呢?但让它们在iPhone和Android上保持活跃状态。我现在不关心Windows 8触摸屏,所以我不介意它对那些人不起作用。
答案 0 :(得分:3)
我通常会在发射锤之前尝试检测设备是否是触摸屏。最好只在你需要的时候加载,而不是在你没有时加载
支持这种方式最受支持的方法之一是
var is_touch_device = 'ontouchstart' in document.documentElement;
然后将你的锤子初始化包裹在
中if(is_touch_device){
// hammer stuff
}
或者你可以嗅探用户代理,如果你只关心一些设备,但这可能有点笨重,容易丢失东西。
答案 1 :(得分:1)
我使用Modernizr来决定是否应该使用锤子:
if ( Modernizr.touch )
{
$("#cr-stage").hammer().on( "swipeleft swiperight swipeup swipedown doubletap pinchin", gesture );
$("#cr-stage").hammer().on( "release", releaseGesture );
}
这比用户代理嗅探更可靠。