javascript - 在 iframe 中模拟鼠标光标

Question

我想(在 iframe 上)显示我可以控制的位置的虚拟光标(带有光标的图像)。

当光标位于 iframe 上的某个位置时，如何模拟悬停和单击事件？

所以它可能类似于 $('iframe').triggerClick(x,y)或 $('iframe').triggerHover(x,y) .

fiddle 所以你可以试试你的答案:http://jsfiddle.net/PVJzb/1/

如果它只在谷歌浏览器中运行就足够了，不需要跨浏览器的解决方案。

请注意，iframe 位于同一个域中，因此我可以访问其内容。

Answer 1

这在 JavaScript 中很难做到，即使你完美地编写了代码，在某些情况下和/或浏览器中也可能会失败。您必须记住，JavaScript 并不能真正直接触发原生事件，尽管存在一些特定于浏览器的异常，请参阅 this question有关该主题的更多信息。

更新:
我建议，如果这类似于“如何使用教程”，您可以对其进行屏幕录制，然后在网站上播放视频。
如果你真的必须这样做，可能会更容易按照时间顺序将光标从帧中移动，并让 jQuery 执行所有必要的事件，避免在 x,y 坐标处检测元素。

话虽这么说，这就是我解决这个问题的方法:

您可以做的是使用 JavaScript + jQuery 模拟大多数事件。例如，如果你想模拟所有元素的点击事件，你应该首先创建一个点击事件处理程序:

// Simulate their standard behavior
// if they already had a click event handler make sure it stops propagation
// or returns false, preventDefault won't stop the browser from following 
// their href now.
// Change the #iframe accordingly
$("#iframe").contents().find("a").bind('click', function(){
      window.location.href = $(this).attr('href');
});

现在为了确保新绑定(bind)的点击事件被触发，我们必须手动触发它。根据你的问题，你知道虚拟鼠标的坐标，所以我假设它们在变量 中x 和 是 .

为了获得虚拟鼠标下方的元素，您可以使用 JavaScript 函数 elementFromPoint() ，但作为最有用的 JavaScript 函数，它在所有浏览器中的工作方式并不相同。

我还没有对此进行测试，但是 http://www.zehnet.de/2010/11/19/document-elementfrompoint-a-jquery-solution/ 上提供了该功能的改进版本。 ，假设它可以正常工作，让我们继续前进。

在 iframe 上而不是在当前文档中调用 elementFromPoint 非常重要，否则它将返回 iframe 元素(更多信息 here )

// x,y should be the coordinates where the virtual mouse is
var elementUnder = $("#iframe").contents().get(0).elementFromPoint(x,y);
if($(elementUnder) !== null){
    // Now you must decide what to do, probably depending on the element type
    // and finally, if it is an anchor, trigger the click event
    if($(elementUnder).is("a")) $(elementUnder).trigger('click');
} 

可能有更简单或更优雅的解决方案，尽管我真的想不出。由于 iframe 中的页面位于同一个域中，我想您已经知道它所有可能的内容，这使得这变得更加容易，因为您可以为所有必要的事件准备代码。

对于鼠标悬停事件，您也可以这样做，但请记住，您还必须触发鼠标移出事件。

我已将上面的代码添加到您的 jsFiddle 中，以便您可以看到它在 anchor 标记上工作:http://jsfiddle.net/XySmQ/4/

你必须记住，有很多事件是 JavaScript 或 jQuery 不能重新创建，例如 dropdown dropping down .