Question

我尝试通过回调功能启用一些触控功能，但我在回调功能中访问该事件以及$（this）时遇到问题。现在代码如下：

$('.img-responsive').each(touchControls);

function touchControls(event) {
    event.preventDefault();
    var mc = new Hammer(this);
    mc.on("doubletap", function() {
        console.log($(this));
    });
}

其中＆＃39; .img-responsive＆＃39;是我页面上的一类图像。

当它试图调用event.preventDefault时，我收到一个错误，即event.preventDefault不是函数。我以为事件是自动传递给名为的变量？我知道当我使用.on执行命名回调函数时，event.preventDefault（）工作得很好。我认为，当我这样做时，它会有所不同。每次，我如何正确地访问它？

现在，如果我删除event.preventDefault（）行，当它记录$（this）时，我会得到一个函数。我期待得到个别元素，所以我可以为它们设置触控，但这显然不起作用。我试图绑定这个＆＃39;由：

$('.img-responsive').each(touchControls).bind(this);

但是当我记录$（this）时，它仍然是一个函数，而不是我期待的元素。

我基本上只是对如何在定义的回调函数中访问$（this）和事件感到困惑。

Answer 1

.each不是事件处理程序，因此它的回调函数不接受event对象。 each回调函数的方法签名如下所示：

.each（功能）

功能
  类型：功能（整数索引，元素元素）
  为每个匹配元素执行的函数。

因此，您不会引用event对象，但更重要的是，不会有任何默认事件行为要阻止。

相反，on实际上确实设置了事件处理程序。它的回调函数确实将事件作为其参数。您可以在.on的回调函数内的事件处理程序代码中处理事件管理。

在迭代时，

this将引用您当前的元素。但是在你的内部回调函数中会有一个不同的上下文（所以不同的this）。只需在外部范围内存储对元素的引用：

function touchControls() {
    var $this = $(this);
    var mc = new Hammer(this);
    mc.on("doubletap", function(e) {
        e.preventDefault();
        console.log($this);
    });
}

Answer 2

您在错误的函数中传递了事件..您需要将它传递给事件侦听器。每个循环的第一个参数是迭代的当前索引。

$('.img-responsive').each(touchControls);

function touchControls(eachIndex) {
  var mc = new Hammer(this);
  mc.on("doubletap", function(event) {
    // move preventDefault here and pass the event
    event.preventDefault();
    console.log($(this));
  });
}

function Hammer(el){
  return $(el)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="img-responsive">img</div>
<div class="img-responsive">img</div>

如何在定义的回调函数中访问$（this）和事件

2 个答案: