多个元素响应移动Webkit和Hammer JS上的触摸事件 [英] Multiple elements respond to touch event on mobile Webkit and Hammer JS

问题描述

我正在使用Hammer JS库开发一个小型项目，我在Chrome开发工具模拟器上遇到了问题，并在两台iOS 7设备上进行了调试。它似乎在桌面浏览器上正常工作。小提琴在这里： http://jsfiddle.net/w80baz5g/5/ 以及下面的更多信息。

I'm working on a small side project using the Hammer JS library and I've ran into a problem on Chrome Dev Tools emulator and while debugging on two iOS 7 devices. It seems to work fine on desktop browsers. Fiddle here: http://jsfiddle.net/w80baz5g/5/ and more info below.

我有一组元素，如下所示：

I've a group of elements, like this:

<div>
    <img class="item" id="item0" src="http://placehold.it/300x300">
    <img class="item" id="item1" src="http://placehold.it/300x300">
    <img class="item" id="item2" src="http://placehold.it/300x300">
</div>

和Hammer JS收听轻敲事件：

and Hammer JS listening to a tap event:

function initItems(el) {
    var itemToTap = new Hammer.Manager(el, itemOptions);
            itemToTap.add( new Hammer.Tap() );
            itemToTap.on("tap", function(event) { 
                console.log("tapped: " + event.target);
        });

}

$(".item").each(function(){
    var itemToInit = $(this)[0];
    initItems(itemToInit);
});

在桌面浏览器（Chrome，Safari）中，一切似乎都很好，移动设备上只有三元素似乎响应轻拍事件，但控制台显示它响应所有三个元素？第二个和第三个元素根本没有响应。

While in desktop browsers (Chrome, Safari) everything seems fine, on mobile only the first out of three elements seems to respond to the tap event but the console shows it responds for all three elements? The second and third element are not responding at all.

小提琴在这里： http://jsfiddle.net/w80baz5g/5/

我错过了什么吗？这些事件/元素是否被移动浏览器区别对待？他们为什么不单独回应一个tap事件？

Am I missing something? Are those events / elements treated differently by mobile browsers? Why aren't they responding individually to a tap event?

非常感谢！

推荐答案

$(".item").each(function(){
    var itemToInit = $(this)[0];
    initItems(itemToInit);
});

尝试使用：

$(".item[id^='item']")...

Or:

$("[id^='item']")...

看看会发生什么。

这篇关于多个元素响应移动Webkit和Hammer JS上的触摸事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！