0

所以我有这个 javascript 代码来监听文档中所有元素的触摸事件。

document.addEventListener("touchstart", touchHandler, true);
document.addEventListener("touchmove", touchHandler, true);
document.addEventListener("touchend", touchHandler, true);
document.addEventListener("touchcancel", touchHandler, true);

这很好用，只是我只想在 dataCard( .dataCard) 类的项目及其所有非锚点的子项上侦听这些事件<a>。

所以我想如何解决这个问题是通过创建一个 jQuery 选择器，因为我在页面前面使用 jQuery，然后调用.addEventListener()它。那没有用。

这是我尝试过的：

$('.dataCard, .dataCard *:not(a)').addEventListener("touchstart", touchHandler, true);
$('.dataCard, .dataCard *:not(a)').addEventListener("touchmove", touchHandler, true);
$('.dataCard, .dataCard *:not(a)').addEventListener("touchend", touchHandler, true);
$('.dataCard, .dataCard *:not(a)').addEventListener("touchcancel", touchHandler, true);

正如我之前提到的那样，它不起作用。我猜是因为 jQuery 和 JS 有时不能很好地混合。

现在，我意识到我还需要将事件委托给.dataCard（那些现在存在的或可能以编程方式创建的）的所有实例。

这是一件好事，因为我现在可以使用带有.on()函数的整个 jQuery 解决方案。

这是我尝试过的：

$('#main').on('touchstart', '.dataCard', function(event){
    touchHandler(event);
});
$('#main').on('touchmove', '.dataCard', function(event){
touchHandler(event);
});
$('#main').on('touchend', '.dataCard', function(event){
touchHandler(event);
});
$('#main').on('touchcancel', '.dataCard', function(event){
touchHandler(event);
});

现在，#main它是稳定的并且将永远存在，它是.dataCard一些存在并且一些将以编程方式添加的 s。

因此，就事件委托而言，这很好用。我的问题是现在这也不起作用。

我认为是因为touchstart, touchmove, touchend, 和touchcancel不是 on 可以识别的 jQuery 事件。

所以我的问题是，我怎样才能做我的第一个代码块所做的（为那些触摸事件添加事件侦听器）只针对.dataCardjQuery 或纯 / vanilla js 中存在并以编程方式创建的所有实例？

4

2 回答 2

1

您可以使用 eventtarget属性并测试它是否是以下实例.dataCard：

$('#main').on('touchstart touchmove touchend touchcancel', '.dataCard', function(event){
    if($(event.target).is('.dataCard')) {
        touchHandler(event);
    }
});

工作演示我还添加了一个单击处理程序，因此您可以在桌面浏览器中对其进行测试。

顺便说一句，您可以通过提供以空格分隔的列表作为on().

于 2013-08-07T16:06:21.227 回答
0

您可以通过将数组参数发送到.on()并使用适当的选择器来做到这一点。

$(function() {
    $('.dataCard *:not(a)', '#main').on({
        touchstart: function() {
           console.log('touchstart');
        },
        touchmove: function() {
          console.log('touchmove');
        },
        touchend: function() {
          console.log('touchend');
        },
        touchcancel: function() {
          console.log('touchcancel');
        }
    });
});

这是jsFiddle。

于 2013-08-07T16:38:59.127 回答