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

Question

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

是否有可能做到这一点 ？

更新：需要跨浏览器

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

Answer 1

这可能是可能的......这是一个完全未经测试和丑陋的尝试。

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

这是计划：

• 让 jQuery 监听画布上的鼠标事件。
• 触发时，获取 mouseX 和 mouseY。
• 获取对 jQuery 事件对象的引用。
• 在 mouseX/mouseY 处获取一组包含每个元素的 jQuery 对象。
• 使用 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;
}

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