gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-02 17:59:36 25 4
gpt4 key购买 nike

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尝试看看问题。

出了什么问题?

最佳答案

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

// CSS

#canvasObj {
pointer-events: none;
}

关于javascript - 委托(delegate)点击 Canvas 到图像映射,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20668544/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com