如何通过画布将事件传递到底层 HTML

Question

我需要创建一个大部分透明的画布，即屏蔽底层 HTML .. 我需要鼠标事件转到画布和下面的 HTML ... 画布几乎是浏览器窗口的全尺寸

这样可以吗？

更新： 需要跨浏览器

...pointer-events: none 不是跨浏览器...还有其他方法吗？ -

Answer 1

有可能……这是一个完全未经测试且丑陋的尝试。

你提到了跨浏览器的兼容性，所以 jQuery 在这里很有用。

计划如下：

• 让 jQuery 监听画布上的鼠标事件。
• 触发后，获取 mouseX 和 mouseY。
• 获取对 jQuery 事件对象的引用。
• 获取一组 jQuery 对象，其中包含 mouseX/mouseY 处的每个元素。
• 使用 jQuery 触发该集合中每个元素的事件。

这是一个可能的起点......并且可能需要调整。

以下是点击事件的一些未经测试的代码：

// 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;
}

如果页面上的元素不移动，您可以通过预先计算每个元素的位置而不是在每个事件期间计算它来提高性能。