我有一个覆盖网页的雪白效果的画布，我想将画布中的点击委托给要点击的元素。
此脚本适用于其他对象，但在某些浏览器的图像映射（带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重叠的地图时，AREA元素的onclick函数将触发。但是，当您单击“画布”所覆盖的地图部分时，它不会在指定的浏览器中触发onclick功能。尝试使用IEF / IE浏览器的JSFiddle：没有问题，请尝试使用FireFox / Safari查看问题。
出了什么问题？
答案 0 :(得分：2)
你可以让canvas停止使用CSS指针事件来监听鼠标事件：无;
// CSS
#canvasObj {
pointer-events: none;
}
答案 1 :(得分：0)
您只是触发实际的点击或onclick处理程序，而不是触发器添加的任何处理程序，您需要使用dispatchEvent触发事件。
此外，处理光标位置的事件属性并不总是从一个浏览器到另一个浏览器正确匹配，因此您可能希望使用诸如jQuery之类的库来规范它们的值。
答案 2 :(得分：0)
好的，所以我让它以一种非常可怕的手动方式工作。
首先，我意识到目标元素是找到<img>而不是map > <area>元素。所以我必须手动完成。我查看了<img usemap="">属性，按ID找到了<map>，然后我必须使用event.clientX和event.clientY从点击的位置进行计算，其中<area>为<area shape="poly"...>该地图本打算被点击。
在我的情况下，这更加可怕，因为我使用了 // delegate click through canvas to page
var bindEvent = function(element, type, handler)
{
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
element.attachEvent('on'+type, handler);
}
};
bindEvent(canvas, 'click', function(event) {
event = event || window.event;
canvas.style.zIndex = "0";
target = document.elementFromPoint(event.clientX, event.clientY);
if (target.useMap) {
var evt = document.createEvent("MouseEvents");
evt.initMouseEvent("click", true, true, window, 1, 0, 0, 0, 0,
false, false, false, false, 0, null);
var mapid = target.useMap.replace("#","");
var map = document.getElementById(mapid);
var x = event.clientX - target.offsetParent.offsetLeft;
var y = event.clientY - target.offsetParent.offsetTop;
console.log("("+x+","+y+")");
var areas = map.getElementsByTagName("area");
var clickarea = areas[0];
for (var i=0; i<areas.length; i++) {
var area = areas[i];
var coords = area.coords.split(",");
if (area.shape == "rect"
&& x > parseInt(coords[0])
&& x < parseInt(coords[2])
&& y > parseInt(coords[1])
&& y < parseInt(coords[3])) {
console.log(x+">"+coords[0]
+" && "+x+"<"+coords[2]);
console.log(y+">"+coords[1]
+" && "+y+"<"+coords[3]);
clickarea = area;
break;
}
}
clickarea.dispatchEvent(evt);
} else if (target.click) {
target.click();
} else {
target.onclick();
}
canvas.style.zIndex = "1000000";
}, false);
元素，因此如果其他元素不正确，我只是默认为多边形区域。
{{1}}