Question

我正在使用.on（）在我的DOM中添加一些项目 - 一个输入范围字段，以及一些带有.colorBlock类的块。这些事件监听器只需要间歇性地激活，并且我想在它们不使用时将它们转换为.off（）。这样做意味着使用命名函数而不是匿名函数。

如此公平，除了我需要将数据传递给回调函数。我知道我可以使用第二个（第三个？）参数字段将一个对象传递给事件，该事件在回调中是可读的，但这样做似乎是这个到事件的范围，而不是监听.on（）的DOM节点。见下面的例子：

$('#brushSize').on('touchend', { size: $(this).val() }, utils.setBrushSize);
$('.colorBlock').on('touchstart', { color: $(this).data('color') }, utils.setColor);

在我的回调函数中，我为e.data.color和e.data.size添加了一个警报，并且都调出了 undefined 。

更糟糕的是，这是一个手机缺口应用程序，所以我的选项有限，无法追踪传递的内容，所以我假设的一些内容可能是错误的。

有什么建议吗？

感谢。

Answer 1

让我们分解这一行：

$('#brushSize').on('touchend', { size: $(this).val() }, utils.setBrushSize);

完全与此相同（除变量之外）：

var sizeValue = $(this).val();
$('#brushSize').on('touchend', { size: sizeValue }, utils.setBrushSize);

例如，您正在调用$(this).val()，然后将结果作为数据对象的一部分进行调用。因此，除非this已经是您想要从该点获取值的内容，否则它将不起作用。

如果您想在事件发生时从元素中获取一些信息，只需将该代码放入事件处理程序即可。例如，看看这一行：

$('.colorBlock').on('touchstart', { color: $(this).data('color') }, utils.setColor);

在我看来，你正试图从被触摸的.colorBlock元素中获取颜色。如果是这样的话：

$('.colorBlock').on('touchstart', function() {
    utils.setColor($(this).data('color'));
});

或者如果您要重复使用它：

utils.setColorFromEventElement = function() {
    utils.setColor($(this).data('color'));
};

和

$('.colorBlock').on('touchstart', utils.setColorFromEventElement);

旁注：

这条线也可能存在第二个问题。您使用utils.setBrushSize作为事件处理程序。请注意，在setBrushSize的调用中，this将引用您挂接事件的DOM元素，而不是utils。现在，鉴于名称utils，也许这无关紧要，但我想我会提到它。

更多：Mythical methods，You must remember this

Answer 2

您在arguments对象中发送的值始终是调用.on（）语句时的值。每次事件发生时都不会动态重新调用该函数。

我个人认为让util类去寻找一些DOM元素并获得它的价值真是太丑了，正如你所提到的，你真正想做的是让你的util函数在与.on相同的范围内运行（）声明。

你的第一直觉可能是正确的。您不需要匿名函数，因为您希望能够调用off（）。理想情况下，您需要一个与调用on（）语句的内容在同一范围内运行的命名函数。所以你想要做的是将util函数绑定到当前范围：

$('#brushSize').on('touchend', utils.setBrushSize.bind(this));

然后在utils.setBrushSize中，$（this）是你调用.on（）的函数。

编辑虽然这只是一个警告：当你调用off（）时，你想这样调用它：

$('#brushSize').off('touchend', utils.setBrushSize);

不在新的范围限制版本的setBrushSize上。 JQuery应该将它识别为与您绑定的原始函数相同并将其关闭。

重新编辑我现在意识到你的val（）在$（'＃brushSize'）中，因为那是你试图调用的“this”...而不是函数持有声明。在这种情况下，你可以这样做：

$('#brushSize').on('touchend', utils.setBrushSize.bind($(this)));

Answer 3

因此，针对此特定问题的解决方案最终要求我将这段代码从Phone Gap中删除并在浏览器中重建它。然后我能够在console.log中发送要发送到回调的事件，并检查它们以更好地理解事件对象。

解决方案是使用event.target。这允许获取.colorBlock监听器的event.target.dataset.color和brushSize范围监听器的event.target.value。

所以对于未来的我来说，如果我的应用程序在浏览器中有一个可靠的工作版本，并且电话间隙被剥离，我会很高兴为这类问题做更好的测试。

在jQuery .on（）数据对象中访问$（this）？

3 个答案: