Question

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

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

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

小提琴让你可以尝试答案：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');
});

现在要确保新绑定的click事件被触发，我们必须手动触发它。根据你的问题你知道虚拟鼠标的坐标，所以我认为它们是变量 x 和 y 。

为了获得虚拟鼠标下方的元素，您可以使用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中，以便您可以看到它在锚标记上工作：http://jsfiddle.net/XySmQ/4/

您必须记住，JavaScript或jQuery 无法重新创建的事件很多，例如dropdown dropping down。

Answer 2

编辑：由于jsfiddle包装iframe的方式我无法在jsfiddle中测试代码，但我在本地设置了一个快速测试，下面的代码工作正常。

我恐怕你不能从javascript触发css悬停。如果你可以修改css，那么你可以触发的类（即element.hover而不是element:hover）触发悬停效果。

所以我建议你尝试的是：

var iframeDoc = $('iframe').contents().get(0);
var lastHovered = [false];

$(iframeDoc).mousemove(function(e) {
    var elementHovered = iframeDoc.elementFromPoint(e.clientX, e.clientY);
    elementHovered = $(elementHovered);
    // remove previous added hover and add a new hover class
    if (lastHovered[0] != elementHovered[0]) {
        if (lastHovered[0]) lastHovered.removeClass('hover');
        lastHovered = elementHovered;
        elementHovered.addClass('hover');
    }
}).click(function(e) { 
    var elementClicked = iframeDoc.elementFromPoint(e.clientX, e.clientY);        
    alert("clicked element "+elementHovered); });
});

在iframe中模拟鼠标光标

2 个答案: