0

我正在使用 .on() 在我的 DOM 中添加一些侦听器项目 - 一个输入范围字段，以及一些具有 .colorBlock 类的块。这些事件监听器只需要间歇性地处于活动状态，我想在它们不使用时将它们 .off() 关闭。这样做意味着使用命名函数而不是匿名函数。

很公平，除了我需要将数据传递给回调函数。我知道我可以使用第二个（第三个？）参数字段将一个对象传递给事件，该对象在回调中是可读的，但这样做似乎是将其范围限定为event，而不是 .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。

更糟糕的是，这是一个电话间隙应用程序，所以我在追踪正在传递的内容方面的选择有限，所以我假设的一些内容可能对正在发生的事情是错误的。

有什么建议么？

谢谢。

4

3 回答 3

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，也许这无关紧要，但我想我会提到它。

更多：神话方法，你一定要记住this

于 2013-11-01T08:14:34.617 回答
1

您在 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”……而不是保存 on 语句的函数。在这种情况下，您可以这样做：

$('#brushSize').on('touchend', utils.setBrushSize.bind($(this)));
于 2013-11-01T08:39:20.090 回答
0

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

解决方案是使用 event.target。这允许为 .colorBlock 侦听器获取 event.target.dataset.color，并从 BrushSize 范围侦听器获取 event.target.value。

因此，对于未来的我来说，我会很高兴在浏览器中拥有我的应用程序的可靠工作版本，去掉电话间隙的东西，以便更好地测试此类问题。

于 2013-11-01T20:09:28.743 回答