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

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

本文关键字：this event 访问 定义 函数 回调      更新时间：2023-09-26

我试图通过回调函数启用一些触摸控制，但我在回调函数中访问事件以及$(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，我得到一个错误。preventDefault不是一个函数。我认为事件是自动传递给变量称为?我知道当我用.on做一个命名的回调函数时，event.preventDefault()工作得很好。我假设使用。each时是不同的，我如何正确地访问它?

现在，如果我删除event.preventDefault()行，当它记录$(this)时，我得到一个函数。我希望获得独立的元素，这样我就可以为它们设置触摸控制，但这显然行不通。我试图绑定'this':

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

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

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

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

。each(function)

function
类型:Function(Integer index, Element 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);
    });
}

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

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

相关文章：