Question

所以我有这个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存在，有些将以编程方式添加。

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

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

所以我的问题是，我如何才能执行我的第一个代码块（为这些触摸事件添加事件侦听器）仅针对.dataCard的所有实例，那些存在并以编程方式创建的实例，在jQuery或plain / vanilla js？

Answer 1

您可以使用事件target属性并测试它是.dataCard的实例：

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

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

顺便说一句，您可以通过提供以空格分隔的列表作为on()的第一个参数来为同一个处理程序注册多个事件侦听器。

Answer 2

您可以通过将数组参数发送到.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。

用jquery的.on（）触摸事件事件委托

2 个答案: