我正在Safari for iPad上创建一个网站.我需要阻止双击事件的缩放,但我有两个问题:
<meta name = "viewport" content = "user-scalable = no">"......如果我这样做,用户就永远无法放大我的页面.我该如何解决这些问题？
Mobile Safari不支持javascript ondblclick事件.它被Safari解释为"缩放".
Raul Sanchez发布了一个潜在的解决方案:http: //appcropolis.com/implementing-doubletap-on-iphones-and-ipads/
这是我为同一目的编写的jQuery插件 - 选择性地禁用双击缩放给定页面元素(在我的情况下,导航按钮翻转页面)我想响应每个点击(包括双击)作为普通点击事件,没有iOS"触摸魔术".
要使用它,只需$('.prev,.next').nodoubletapzoom();在你关心的元素上运行.(编辑:现在也忽略了捏)
// jQuery no-double-tap-zoom plugin
// Triple-licensed: Public Domain, MIT and WTFPL license - share and enjoy!
(function($) {
var IS_IOS = /iphone|ipad/i.test(navigator.userAgent);
$.fn.nodoubletapzoom = function() {
if (IS_IOS)
$(this).bind('touchstart', function preventZoom(e) {
var t2 = e.timeStamp
, t1 = $(this).data('lastTouch') || t2
, dt = t2 - t1
, fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1) return; // not double-tap
e.preventDefault(); // double tap - prevent the zoom
// also synthesize click events we just swallowed up
$(this).trigger('click').trigger('click');
});
};
})(jQuery);
尝试这个修改过的代码 它应该适用于Android和IOS设备
(function($) {
$.fn.nodoubletapzoom = function() {
$(this).bind('touchstart', function preventZoom(e){
var t2 = e.timeStamp;
var t1 = $(this).data('lastTouch') || t2;
var dt = t2 - t1;
var fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1){
return; // not double-tap
}
e.preventDefault(); // double tap - prevent the zoom
// also synthesize click events we just swallowed up
$(e.target).trigger('click');
});
};
})(jQuery);
然后将nodoubletapzoom()应用于body标签
$("body").nodoubletapzoom();
我修改了@ ecmanaut的javascript解决方案来做两件事.
我相信这些修改使它更好,因为你可以增加一个计数器1,2,3,4而不是2,4,6,8
这是修改后的代码:
// jQuery no-double-tap-zoom plugin
// Triple-licensed: Public Domain, MIT and WTFPL license - share and enjoy!
//
// chris.thomas@antimatter-studios.com: I modified this to
// use modernizr and the html.touch detection and also to stop counting two
// clicks at once, but count each click separately.
(function($) {
$.fn.nodoubletapzoom = function() {
if($("html.touch").length == 0) return;
$(this).bind('touchstart', function preventZoom(e){
var t2 = e.timeStamp;
var t1 = $(this).data('lastTouch') || t2;
var dt = t2 - t1;
var fingers = e.originalEvent.touches.length;
$(this).data('lastTouch', t2);
if (!dt || dt > 500 || fingers > 1){
return; // not double-tap
}
e.preventDefault(); // double tap - prevent the zoom
// also synthesize click events we just swallowed up
$(this).trigger('click');
});
};
})(jQuery);
将nodoubletapzoom()应用于body标签,就像这样
$("body").nodoubletapzoom();
你的HTML构造,应该是这样的
<body>
<div class="content">...your content and everything in your page</div>
</body>
然后在你的javascript中绑定你的点击处理程序
$(".content")
.on(".mydomelement","click",function(){...})
.on("button","click",function(){...})
.on("input","keyup blur",function(){...});
// etc etc etc, add ALL your handlers in this way
您可以使用任何jquery事件处理程序和任何dom节点.现在你不必再做任何事了,你必须以这种方式附加你所有的事件处理程序,我没有尝试过另一种方式,但是这种方式绝对是坚如磐石的,你可以逐字地说出屏幕每秒10次它没有缩放和注册点击(显然不是每秒10,ipad不是那么快,我的意思是,你不能触发缩放)
我认为这是有效的,因为你将nozoom处理程序附加到正文,然后将所有事件处理程序附加到".content"节点,但委托给相关的特定节点,因此jquery在最后阶段捕获所有处理程序事件会冒泡到body标签.
这个解决方案的主要好处是你只需要将nodoubletapzoom()处理程序分配给body,你只需要执行一次,而不是每个元素执行一次,因此为了完成工作,所需的工作量,工作量和思维要少得多.
这有另外一个好处,如果你使用AJAX添加内容,它们会自动准备并等待处理程序,我想如果你不想这样,那么这个方法对你不起作用,你将不得不调整它.
我已经验证了这个代码适用于ipad,它实际上非常漂亮,对于@ecmanaut主要解决方案做得很好!
**修改于5月26日星期六,因为我发现似乎是一个完美的解决方案,只需极少的努力
| 归档时间： |
|
| 查看次数： |
37169 次 |
| 最近记录： |