Я изменил решение javascript @ ecmanaut, чтобы сделать две вещи.
- Я использую modernizr, поэтому он поместит класс .touch css на узел html, чтобы я мог обнаруживать сенсорные экраны вместо использования обнаружения пользовательского агента. Возможно, существует подход «без модернизма», но я его не знаю.
- Я разделяю каждый «щелчок», чтобы они происходили отдельно, если вы щелкнете один раз, он щелкнет один раз, если вы быстро нажмете кнопку / триггер, он будет считаться несколько раз.
- незначительные изменения форматирования кода, я предпочитаю каждую переменную, определенную отдельно, и т. Д., Это больше "я", чем что-либо еще, я полагаю, вы могли бы просто отменить это, ничего плохого не произойдет.
Я полагаю, что эти модификации делают это лучше, потому что вы можете увеличить счетчик 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 () для тела, вы делаете это только один раз, а не один раз для каждого элемента, так что для того, чтобы получить, требуется гораздо меньше работы, усилий и мышления. все сделано.
это дает дополнительное преимущество, заключающееся в том, что если вы добавляете контент с помощью AJAX, обработчики автоматически получают готовые и ожидающие обработчики. Полагаю, если вы этого НЕ хотите, то этот метод не будет работать для вас, и вам придется настроить это больше.
Я проверил, что этот код работает на ipad, на самом деле он прекрасен, молодец @ecmanaut для основного решения !!
** Изменено в субботу 26 мая, потому что я нашел то, что кажется идеальным решением с минимальными усилиями