Jquery iPad touch事件,但仍允许收缩缩放
我正在制作一个包含jquery滑块的页面。我想为iPad网站访问者启用这些滑块。我使用以下代码实现了此操作:Jquery iPad touch事件,但仍允许收缩缩放,jquery,ipad,jquery-ui,touch-event,sliders,Jquery,Ipad,Jquery Ui,Touch Event,Sliders,我正在制作一个包含jquery滑块的页面。我想为iPad网站访问者启用这些滑块。我使用以下代码实现了此操作: function touchHandler(event) { var touches = event.changedTouches, first = touches[0], type = ""; switch(event.type)
function touchHandler(event)
{
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type)
{
case "touchstart": type = "mousedown"; break;
case "touchmove": type="mousemove"; break;
case "touchend": type="mouseup"; break;
default: return;
}
//initMouseEvent(type, canBubble, cancelable, view, clickCount,
// screenX, screenY, clientX, clientY, ctrlKey,
// altKey, shiftKey, metaKey, button, relatedTarget);
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
function init()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
if ( (navigator.userAgent.match(/iPad/i)) ) {
init();
}
这很好用,只是我不再能够在iPad上放大缩小页面了。我有没有办法保留收缩/缩放功能,然后让触摸事件在jquery滑块上正常工作
下面是正在运行的测试页面:这里的问题在于
事件.preventDefault()
,它取消了手势的正常解释和处理,并方便了您的自定义交互。要在自定义事件中保留默认的“收缩到缩放”功能,您需要将自定义处理程序包装在一个条件中,该条件评估事件是否符合某些条件,这表明用户试图使用自定义交互而不是Apple的默认交互。我认为changedTouches
将是一个相当公平的指标,因为收缩到缩放功能是一个多点触摸事件,这意味着changedTouches
的长度大于1。因此,如果changedtouchs.length==1,您可能只想触发自定义事件(从而防止默认行为),以下是我所做的工作:
function touchHandler(event)
{
if (String(event.target).indexOf("#") != -1) { // THIS IS A UNIQUE ATTRIBUTE OF THE JQUERY SLIDER BUTTON. I CHECK TO SEE IF THE TARGET INCLUDES THAT '#' SIGN AND THEN IF IT DOES I GENERATE THE SIMULATED EVENT. OTHERWISE LET THE NOMRAL PAGE BEHAVIOR CONTINUE.
var touches = event.changedTouches,
first = touches[0],
type = "";
switch(event.type) {
case "touchstart":
type = "mousedown";
break;
case "touchmove":
type="mousemove";
break;
case "touchend":
type="mouseup";
break;
default: return;
}
//initMouseEvent(type, canBubble, cancelable, view, clickCount,
// screenX, screenY, clientX, clientY, ctrlKey,
// altKey, shiftKey, metaKey, button, relatedTarget);
var simulatedEvent = document.createEvent("MouseEvent");
simulatedEvent.initMouseEvent(type, true, true, window, 1,
first.screenX, first.screenY,
first.clientX, first.clientY, false,
false, false, false, 0/*left*/, null);
first.target.dispatchEvent(simulatedEvent);
event.preventDefault();
}
}
function init()
{
document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);
}
init();
哦哦。。。好主意。我会试一试,让你知道进展如何。谢谢你,亚伦!是的,这是一个很好的方法。我可以将SliderDOM元素作为目标,以清除touchCancel上的事件侦听器。我将在解决问题后发布解决方案。很高兴我能帮上忙!祝你好运。注意:这也适用于iPhone和Android浏览器。