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

【问题标题】：How to access $(this) and event in defined callback function如何在定义的回调函数中访问 $(this) 和事件
【发布时间】：2016-09-30 18:00:03
【问题描述】：

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

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

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

“.img-responsive”是我页面上的一类图像。

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

现在，如果我删除 event.preventDefault() 行，当它记录 $(this) 时，我会得到一个函数。我期待获得单独的元素，这样我就可以为它们设置触摸控制，但这显然行不通。我试图通过以下方式绑定“this”：

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

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

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

【问题讨论】：

标签： javascript jquery callback hammer.js

【解决方案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);
    });
}

【讨论】：

在这种情况下，如何防止双击事件的默认行为放大？如果我不应该在这里阻止它，那么我在哪里访问它来阻止它？
@MichaelYousef 更新了我的回复以解决事件管理问题。
我猜 Hammer 改变了上下文，所以这指向了 doubletap 的函数？无论如何，您的解决方案很有效，非常感谢。
@MichaelYousef 与其说Hammer 更改上下文不如on 更改上下文。来自文档：“当 jQuery 调用处理程序时， this 关键字是对传递事件的元素的引用；对于直接绑定的事件，这是事件所在的元素已附加”在您的情况下，处理程序绑定到mc，这就是this 所指的内容。

【解决方案2】：

您在错误的函数中传递了事件。您需要将其传递给事件侦听器。 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>

【讨论】：