Javascript 在页面上点击模拟

Question

我目前正在使用带有 Javascript/html 前端的 LeapMotion 开发一个项目。我想用 LeapMotion 控制整个应用程序（包括点击、单击和拖动等）。但是，我运行遇到了一点问题。

我想触发一个 MouseEvent("click")，但是，我不想触发特定元素上的事件（如讨论的 here）。这是因为我不想“手动”检查我的 LeapMotion 光标在哪个元素上并在其上调用触发器。相反，我想触发一个更“纯粹”的点击事件，其中 Javascript 确定被点击的内容。这样的事情可能吗？如果没有，是否有任何合理的变通办法？

编辑： 一些更多的信息。我目前可以在我的代码中确定何时需要根据来自 LeapMotion 的数据触发点击事件。我的问题是我需要一种方法来触发页面上的点击事件。目前，我找到的解决方案可以创建一个 MouseEvent，但他们必须在特定的 div/element/etc 上调用它。我想触发一个更“全局”的 MouseEvent 这样我就可以在页面而不是特定元素上触发它。

Answer 1

对于以后遇到类似问题的任何人，以下是我最终解决此问题的方法。

LeapMotion 正在更新 "cursor" 对象在屏幕中的位置。当我确定用户正在执行点击时，我执行以下操作：

获取光标的位置（进行一些计算以引用光标的中心而不是 javascript 将给您的顶部和左侧偏移量）
使用 document.elementFromPoint(x, y) 我检索了光标当前悬停的元素（如果元素相互重叠，可能需要在此处进行一些解析）。

如下创建 MouseEvent 并将其分派给元素。

var evt = new MouseEvent("mousedown", function(){
    view: window,
    cancelable: true,
    clientX: x,
    clientY: y
});
element.dispatchEvent(evt);

我还应该注意，我需要区分 mousedown、mouseup、click 和 mousemove 事件。因此，在确定发送哪个事件时有一些逻辑。但是，我只按位置检索元素一次（在 mousedown 事件调用中），以便在单击时容忍用户手的一些移动。

这不是最好的解决方案，但效果很好。希望这对您有所帮助！

Javascript 在页面上点击模拟

Javascript click simulation on a page

html

javascript

dom-events

leap-motion