如何通過畫布傳遞事件到底層HTML

Question

我需要創建一個大多數透明的畫布，即掩蓋底層的HTML ..我需要鼠標事件去畫布和下面的HTML ......畫布是幾乎全尺寸的瀏覽器窗口

是否有可能這樣做？

更新： 它必須是跨瀏覽器

...指針的事件：無不是跨瀏覽器...有沒有其他辦法？ -

Answer 1

這可能是可能的......這裏是一個完全未經測試和醜陋的嘗試。

你提到跨瀏覽器的兼容性，所以jQuery在這裏很有用。

這裏的計劃：

• 擁有jQuery的監聽畫布上的鼠標事件。
• 當被觸發時，獲取mouseX和mouseY。
• 獲取對jQuery事件對象的引用。
• 獲取一組包含mouseX/mouseY上每個元素的jQuery對象。
• 使用jQuery在該集合中的每個元素上觸發事件。

這是一個可能的起點......並可能需要tweeking。

這裏的單擊事件的一些未測試的代碼：

// pre-calc the offsets of the canvas 
var canvasOffset=$("#canvas").offset(); 
var offsetX=canvasOffset.left; 
var offsetY=canvasOffset.top; 

// on canvas click, 
// get all elements under the click 
// and trigger the click event on them 

$("#mycanvas").click(function(e){ 
    mouseX=parseInt(e.clientX-offsetX); 
    mouseY=parseInt(e.clientY-offsetY); 

    // get a referenct to the jq click event object 
    var mEvent=$.Event('click');      // added '.' 

    // get a set of all elements under mouseX/mouseY 
    var elements=elementsAtXY(mouseX,mouseY); 

    // trigger the event on each element under X/Y 
    elements.each(function(){ 
     $(this).trigger(mEvent); 
    }); 

}); 



function elementsAtXY(x,y){ 
    var $elements = $("body *").map(function() { 
     var $this = $(this); 
     var offset = $this.offset(); 
     var mleft = offset.left; 
     var mtop = offset.top; 
     var height = $this.height(); 
     var width = $this.width(); 
     var mright = mleft + width; 
     var mbottom = mtop + height; 

     return (y>=mtop && y <=mbottom) && (x>=mleft && x<=mright) ? $this : null; 
    }); 
    return $elements; 
} 

如果你的頁面上的元素不動，你可以提高通過預先計算每個元件的位置，而不是每一個過程中計算它的性能事件。