代码之家 › 专栏 › 技术社区 › Mike Lischke

如何将所有鼠标输入路由到特定的HTML元素?

html javascript

Mike Lischke · 技术社区 · 4 年前

我有一个tile元素,在鼠标悬停时显示一个图像(并高亮显示该tile)。当用户单击该图像时,将显示弹出窗口(作为上下文菜单)。这已经起作用了。当用户将鼠标移到平铺外时,悬停状态消失,高光和图像也消失,这是不应该发生的。相反,只要菜单可见,我希望视觉状态不受影响。

所以我试着用 Element.setPointerCapture onPointerDown 在触发图像上,但那没有任何作用。

实现此鼠标捕获的正确方法是什么,这样除了弹出窗口之外,不会将鼠标事件安排到任何其他HTML元素?

这就是我到目前为止的想法:

private handleTriggerClick = (e: React.MouseEvent): void => {
    console.log("mouse");
    this.props.trigger?.props.onClick?.(e);

    if (this.state.open && this.props.closeOnTriggerClick) {
        this.close();
    } else if (!this.state.open && this.props.openOnTriggerClick) {
        this.open();
        e.currentTarget.setPointerCapture(this.pointerId);
    }
    e.stopPropagation();
};

private handleTriggerPointerDown = (e: React.PointerEvent): void => {
    console.log("pointer");
    this.pointerId = e.pointerId;
};

哪里 trigger 用于显示弹出窗口的图像。

我还尝试在文档上使用鼠标移动处理程序,但这也不起作用,可能是因为事件冒泡,更深层次的元素在到达文档之前首先接收事件,因此阻止默认处理或停止传播为时已晚。