4

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

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

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

小提琴所以你可以试试你的答案：http: //jsfiddle.net/PVJzb/1/

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

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

4

2 回答 2

1

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

更新： 我建议如果这类似于“如何使用教程”，您可以对其进行屏幕录制，然后在网站上播放视频。如果你真的必须这样做，可能会更容易按照时间顺序从帧中移动光标，并让 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');
});

现在为了确保新绑定的点击事件被触发，我们必须手动触发它。根据你的问题，你知道虚拟鼠标的坐标，所以我假设它们在变量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 drop down。

于 2013-01-02T17:34:53.003 回答
1

编辑：由于 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); });
});
于 2013-01-02T17:36:20.323 回答