javascript - 在 $(document) 上绑定(bind)事件时绑定(bind)上下文

Question

情况是这样的:我有一个 div，我们可以使用 $('#container') 获取它，这个 div 的子 div 是 ('#tracker')。在跟踪器上，我将事件绑定(bind)为:

$(document).on('mousemove', '#tracker', function(e) {
    console.log(e.clientX);
}

但是，我希望将它绑定(bind)到容器的上下文中，即我希望功能与以下内容相同:

$('#tracker', '#container').onmousemove = function() { ... }

但应用于文档。或另有说明的建议

[编辑]抱歉，原来的问题含糊不清。

如果我尝试缓存，那么我可以执行 var v = $('#tracker', '#container') 然后我可以执行 v.onmousemove = function () { ... }

这是如何工作的:

$(document).on('mousemove', <cached in var>, function(e) {
    console.log(e.clientX);
}

Answer 1

只需扩展传递给 .on() 的选择器，以仅查找 #container 元素内的 #tracker 元素:

$(document).on('mousemove', '#container #tracker', function(e) {
    console.log(e.clientX);
});

如果您想将对象缓存在另一个变量中，有几种方法可以做到这一点。第一个和以前一样，但是当你调用 .on() 时你不会使用它:

var v = $('#tracker', '#container');

$(document).on('mousemove', '#container #tracker', function(e) {
    // use v here
});

// you can also use v here

或者，如果您只在事件处理函数内部需要它，您可以这样做:

$(document).on('mousemove', '#container #tracker', function(e) {
    var v = $(this);
    // use v here
});