在iframe中模擬鼠標光標

我想顯示（在iframe上）虛擬光標（帶有光標的圖像），我可以控制哪個位置。在iframe中模擬鼠標光標

當光標位於iframe的某個位置時，如何模擬懸停和單擊事件？

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

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

它甚至是不夠的，如果它只能在谷歌瀏覽器，並不需要一個跨瀏覽器的解決方案。

請注意，該iframe是在同一個域，所以我可以訪問其內容。

來源

2012-12-30 Cristy

+14

如果只有每個人都提到，最後一行是你一個人。 – techfoobar

['elementFromPoint（）']（https://developer.mozilla.org/en-US/docs/DOM/document.elementFromPoint）在這種情況下可能會有用。 – Teemu

http://api.jquery.com/category/events/event-object/描述如何創建事件並手動觸發它們 –

這在JavaScript中很難做到，即使您完全編寫代碼，在某些情況下和/或瀏覽器中仍可能會失敗。您必須記住JavaScript不能直接觸發本地事件，儘管有一些特定於瀏覽器的異常，請參閱this question以獲取有關該主題的更多信息。

UPDATE： 我建議，如果這是有點像「如何使用教程」你的屏幕錄製，然後播放視頻的網站上。如果你確實需要這樣做，那麼按照定時序列從幀中移動光標可能會更容易，並讓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/上有一個改進版本的功能，假設它可以繼續工作。

調用elementFromPoint在iframe和當前文檔沒有，否則將返回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。

來源

2013-01-02 17:34:53 aurbano

「這在JavaScript中很難做到」？有沒有替代做這個沒有JavaScript？ – Cristy

事實上，我不知道其他方式並不意味着沒有，雖然我會驚訝，如果任何人發現替代 – aurbano

我已經添加了一個jsFiddle的代碼工作在錨標記 – aurbano

編輯：由於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-02 17:36:20 Iftah

在iframe中模擬鼠標光標

回答

相關問題