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

Question

我正在尝试通过回调函数启用某些触摸控件，但我在访问事件以及回调函数中的 $(this) 时遇到问题。现在代码如下所示：

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

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

其中“.img-responsive”是我页面上的 class 个图像。

当它尝试调用 event.preventDefault 时，我得到一个错误，指出 event.preventDefault 不是一个函数。我以为事件会自动传递给调用的变量？我知道当我使用 .on 执行命名回调函数时，event.preventDefault() 工作得很好。我认为当我使用 .each 时它是不同的，我如何正确访问它？

现在，如果我删除 event.preventDefault() 行，当它记录 $(this) 时，我得到一个函数。我希望获得单独的元素，以便为它们设置触摸控件，但这显然行不通。我尝试通过以下方式绑定 'this'：

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

但是当我登录 $(this) 时，它仍然是一个函数，而不是我期望的元素。

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

Answer 1

您将事件传递到错误的函数中。您需要将其传递到事件侦听器中。 each 循环的第一个参数是迭代的当前索引。

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

Answer 2

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

.each( function )

function
Type: Function( Integer index, Element element )
A function to execute for each matched element.

所以您不会有一个 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);
    });
}

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

How to access $(this) and event in defined callback function

javascript

jquery

callback

hammer.js