javascript - 委托(delegate)点击 Canvas 到图像映射

Question

JSFiddle:http://jsfiddle.net/6WMXh/170/

我有一个覆盖网页的带有雪花效果的 Canvas ，我想将 Canvas 上的点击委托(delegate)给其下方要点击的元素。

此脚本适用于其他对象，但在某些浏览器中的图像映射(带有 AREA 标记)上失败。

适用于:IE10、Chrome；
失败:FF、Safari。

    // delegate click through canvas to page
    canvas.addEventListener('click', function(event) {
        event = event || window.event;
        canvas.style.zIndex = "0";
        target = document.elementFromPoint(event.clientX, event.clientY);
        if (target.click) {
            target.click();
        } else {
            target.onclick();
        }
        canvas.style.zIndex = "1000000";
    }, false);

请参阅 JSFiddle 以获取该问题的演示。当您单击未与 Canvas 重叠的 map 时，AREA 元素的 onclick 函数将被触发。但是，当您单击 Canvas 覆盖的 map 部分时，它不会在指定的浏览器中触发 onclick 函数。用IE10/Chrome尝试JSFiddle:没有问题，用FireFox/Safari尝试看看问题。

出了什么问题？

Answer 1

您可以使用 CSS 指针事件:none 让 Canvas 停止监听鼠标事件；

// CSS

#canvasObj {
    pointer-events: none;
}