Javascript 使用jquery'触摸事件事件委派；s.on()

我有一个javascript代码，它监听文档中所有元素上的触摸事件

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

这很好，除了我只想侦听数据卡类（

.dataCard

）及其所有非锚定的子项上的事件

因此，我想通过创建一个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);

$('#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);
});

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

现在，我意识到我还需要将事件委托给

.dataCard

的所有实例（现在存在的或可能通过编程创建的实例）

这是一件好事，因为我现在可以使用带有

.on（）

函数的整个jQuery解决方案

这就是我所尝试的：

$('.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);

$('#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

存在一些，并且将以编程方式添加一些

因此，在事件委托方面，这很好。我的问题是，现在这也不起作用了

我想是因为

touchstart

、

touchmove

、

touchend

和

touchcancel

不是on可以识别的jQuery事件

---

因此，我的问题是，如何才能像我的第一块代码那样（为那些触控事件添加事件侦听器），只针对

.dataCard

的所有实例，那些存在的并通过编程创建的实例，在jQuery或普通/香草js？

中，您可以使用event

target

属性并测试它是否是

的实例。数据卡

：

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

我还添加了一个点击处理程序，所以您可以在桌面浏览器中测试它

---

另一方面，您可以使用同一处理程序注册多个事件侦听器，方法是提供一个空格分隔的列表作为

on（）

的第一个参数。您可以通过将数组参数发送到

.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');
        }
    });
});

---

下面是.

顺便说一句，您在调用中有一些不必要的函数包装。你不需要匿名函数；只需执行

.on（'event'，'elem'，touchHandler）所以，这是我试图做的速记。但它不起作用。我正在尝试使用jQuery UI的
.draggable（）
将对象拖动到android和iOS中的多点触摸上。这个脚本可以做到这一点，它可以在桌面和multi-touch:上拖动它，但它也可以防止被拖动对象中的任何内容被单击。所以我想把这些触摸事件绑定到
.dataCard
，而不是它的子对象，这样子对象就可以在手机上被点击或点击。它怎么不起作用呢？它似乎在我发布的演示中起作用。演示效果很好，但当我应用它时，它就不起作用了。我在评论中提供了一些背景信息（我编辑了它）。您的touchhandler是否返回
false
或调用
event.stopPropagation（）
？如果您想在此处查看，我发布了一个新问题：