Question

我有这样的标记：

<div id="largeField">
    <div class="small"></div>
    ......
    <div class="small"></div>
</div>

我尝试使用以下代码在mousemove（在vanilla js中，但这不是必需的）捕获#largeField：

largeField.addEventListener('mousemove', function(event) {
    var elementData = event.srcElement.getBoundingClientRect();
    var eventX = event.pageX - elementData.left;

    // I just want to get event coordinates to draw something below the mouse

    event.stopPropagation();
    event.preventBubble = true;
    return false;
});

Fiddle

问题是我并不总是在#largeField上捕获事件，而是在其他small元素上捕获事件。

我不想在回调中对event.srcElement进行过滤，因为当有{1000}个small元素时，性能就会受到影响。

我问的是正确的方法。我希望仅在#largeField上触发回调。我在代码中问过这个！

Answer 1

你不能，不合理。 mousemove事件起泡，防止这种情况发生的唯一方法就是将mousemove挂钩到所有“小”元素上并取消冒泡，这对任何事都没有帮助，可能会让事情变得更糟。

但是对event.target进行过滤（不是event.srcElement，仅限IE）不应该导致性能问题。

largeField.addEventListener('mousemove', function(event) {
    if (event.target.id !== "largeField") {
        return;
    }
    // Logic here
});

Updated Fiddle

如何仅在指定节点上捕获事件？

Fiddle

1 个答案: