Tag: hammer.js

IE9是否支持转换CSS3效果？

我使用下面的代码进行页面过渡效果但不支持IE9浏览器。 我必须在IE9浏览器中应用该效果。 那么，我该怎么办？ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease;

Hammer.js在’switch’内跳过’case’

将Hammer更新为v2后，它不再识别手势。 它会触发’switch（event.type）’，但会跳过所有情况。 “案例”不再受支持吗？ 代码示例： function handleHammer(event) { // disable browser scrolling event.preventDefault(); switch(event.type) { case ‘tap’: the_single_post.removeClass(‘grab’); var tapPos = (event.gesture.center.pageX) – (element.offset().left); if (tapPos > paneWidth/2) { hammer.next(‘easeinout’); } else if (tapPos < paneWidth/2) { hammer.prev('easeinout'); } break; case 'drag': (etc.) } }

Hammer.js在pinchin / pinchout上缓慢而生涩

我正在使用hammer.js在宠物项目上实现一些触摸屏function。 所需产品是可以使用触摸屏拖动和放大和缩小的地图。 我得到了它的工作，一切都很好，除了pinchin / pinchout机制是非常非常慢。 夹点发生和事件发生之间有一个非常明显的延迟。 这是相关的JQuery / JS代码： 编辑：根据西蒙的建议，代码现在更好（更快）。 这是完成的版本 $(document).ready(function(){ //Function which simulates zoom on the map on pinchin/pinchout $(‘#map’).hammer() .on(“pinchin”, function(e) { var scale = $(this).css(‘transform’); scale = (scale == null ? $(this).css(‘-webkit-transform’) : scale); scale = (scale == null ? $(this).css(‘-ms-transform’) : scale); scale = scale.split(” “); scale = parseFloat(scale[0].substring(7, scale[0].length […]

在动态加载的内容上使用hammer.js

我正在玩hammer.js的网络应用程序。 我可以让它工作得很好，除了加载了ajax的内容。 我为jquery使用hammer.js特殊事件插件。 以下工作正常： $(‘#menu a’).on(“tap”, function(event) { //console.log(event); }); 但是当我使用jquery委托语法时： $(‘body’).on(“tap”, ‘#menu a’, function(event) { //console.log(event); }); 什么都没发生… 什么是正确的语法？

你如何在hammer.js 2.0版中委托事件？

在hammer.js v1.x（使用jquery插件）中，您可以委托这样的事件： $(‘ul’).hammer().on(“touch”, “li”, callback); 使用此语法，您可以将事件侦听器附加到ul而不是您要侦听的单个li元素。 这将允许您动态地将li元素添加到ul而无需重新附加事件侦听器。 但是我无法弄清楚如何在Hammer v2.0中做到这一点。 （我根据新语法改变了touch tap ）。

stopPropagation（）与tap事件

我正在使用hammer.js ，似乎我event.stopPropagation()不适用于tap事件。 如果我单击该子项，则会触发相关事件，但也会触发父事件，我不希望这样。 $(‘#parent’).hammer().bind(‘tap’, function(e) { $(this).css(‘background’, ‘red’); });​​​​​​​​ $(‘#child’).hammer().bind(‘tap’, function(e) { e.stopPropagation(); $(this).css(‘background’, ‘blue’); }); 这是一个例子： http ： //jsfiddle.net/Mt9gV/ 我也试过jGestures ，问题似乎是一样的。 如何使用其中一个库实现此结果？ （如果需要，可以是另一个）

使用Hammer.js缩放SVG

我正在编写一个跨平台的Web应用程序，它使用SVG显示信息。 我需要一个多点触控界面来平移和缩放SVG图形。 根据我的研究，似乎Hammer.js是我最好的方法，我使用的是jQuery库版本。 我可以使用SVG的viewBox属性平移和缩放图像。 我遇到的问题是在缩放缩放期间使用中心点信息（相对于左上角的缩放）。 无论在我的图像中的哪个中心点，都应保持在夹点的中心位置。 显然，解决方案是修改viewBox的前两部分，但我无法确定正确的值。 中心点（event.gesture.center）似乎在浏览器页面坐标中，因此我需要弄清楚如何可靠地缩放它，然后计算viewBox x和y坐标。 我找了一些例子，但找不到任何相关的东西。 使用viewBox属性是扩展SVG图像的最佳方法吗？ 还有更好的选择吗？ 有没有人有从缩放中心缩放SVG图像的示例代码？ 另外，我注意到即使我将事件处理绑定到SVG元素，捏合手势似乎也可以在页面的任何位置工作。 它不是pinch的默认浏览器处理，因为它只使用我的代码缩放SVG图像。 这是我用来绑定pinch事件的代码： $(window.demoData.svgElement).hammer().on(“pinch”, function (event) { event.preventDefault(); … }); 感谢您对这两个问题的任何帮助。

jQuery函数不能与Hammer.js一起使用

我试图添加press到jQuery选择器。 我在同一个文档上有很多元素，所以我不能为每个元素使用ID。 我试过$(selector)[i]就像这里解释的那样。 var selectProduct = $(‘.mh60 a’); for (var i = 0; i < selectProduct.length; i++) { Hammer(selectProduct[i]).on("press", function() { $(selectProduct[i]).addClass('active'); }); } 它没有产生任何错误而且没有工作。 我没有得到我在这里失踪的东西。 当我尝试通过console.log(selectProduct[i]);记录selectProduct[i] console.log(selectProduct[i]); 它给出了undefined结果。 更新1 当我删除for循环并只使用selectProduct[0] ， selectProduct[1] ，…它正在工作，但是使用selectProduct[i] ，它不起作用，所以我认为问题是for循环。 但我没有得到它。 更新2 我也尝试过使用jQuery插件 ，同样的问题 更新3 我再次尝试了each()同样的问题。 它打印控制台消息，但addClass()不起作用。 我想问题是this函数没有返回当前元素。 $(‘.mh60 a’).each(function(){ var mc = new Hammer(this); mc.on(“press”, function() { console.log(‘Double tap!’); […]