javascript - 单击 Canvas 无效

Question

我正在创建一个 donut (以粉红色显示)以使用 Canvas 表示数据。问题是 Canvas 留下的剩余区域(图中用绿色填充)在 Windows 的 IE 和 Safari 中不可点击。我正在使用 pointer-events 点击 Canvas ，IE 和 Safari 不支持。替代解决方案是:我更改了 z-index，由于应用程序的 UI 复杂，这很难实现。

除了更改 z 顺序之外还有什么希望吗？提前致谢!

Answer 1

您可以通过使用与其关联的每个元素的偏移量和尺寸来解决 IE 和 Safari 中的问题。下面是一种基于this demo的方法.希望评论能很好地解释代码

纯Javascript

// Get all overlaying canvases
var canvas = document.getElementsByTagName("canvas"), 
// Get all elements that you want the click to fire on
    background = document.getElementsByClassName("background"); 

// Use click location and dimensions/positioning to fake a click through
function passThrough(e) { 
    // Check all background elements
    for(var i = 0; i < background.length; i++) { 
        // check if clicked point (taken from event) is inside element
        var mouseX = e.pageX;
        var mouseY = e.pageY;
        var obj = background[i];
        var width = obj.clientWidth;
        var height = obj.clientHeight;

        if (mouseX > obj.offsetLeft && mouseX < obj.offsetLeft + width 
            && mouseY > obj.offsetTop && mouseY < obj.offsetTop + height) {
            background[i].onclick(); // Force click event if within dimensions
        }
    }
}

for(var i = 0; i < canvas.length; i++) {
    // Force our function when clicked
    canvas[i].onmousedown = passThrough; 
}
for(var i = 0; i < background.length; i++) {
    // Toggle background when clicked (to show it works)
    background[i].onclick = function() { 
        if(this.style.background == "black") {
            this.style.background = "red";
        }
        else {
            this.style.background = "black";
        }
    }
}

使用 jQuery

// Get all overlaying canvases
var canvas = $("canvas"), 
// Get all elements that you want the click to fire on
    background = $(".background");     
// Use click location and dimensions/positioning to fake a click through
function passThrough(e) { 
    // Check all background elements
    for(var i = 0; i < background.length; i++) { 
        // check if clicked point (taken from event) is inside element
        var mouseX = e.pageX;
        var mouseY = e.pageY;
        var offset = background.eq(i).offset();
        var width = background.eq(i).width();
        var height = background.eq(i).height();

        if (mouseX > offset.left && mouseX < offset.left + width 
            && mouseY > offset.top && mouseY < offset.top + height) {
            background.eq(i).click(); // Force click event if within dimensions
        }
    }
}

for(var i = 0; i < canvas.length; i++) {
    // Force our function when clicked
    canvas.eq(i).off('mousedown').on('mousedown', passThrough); 
}
for(var i = 0; i < background.length; i++) {
    // Toggle background when clicked (to show it works)
    background.eq(i).off('click').on('click', function() { 
        if($(this).css("background-color") == "rgb(0, 0, 0)") {
            $(this).css("background-color", "red");
        }
        else {
            $(this).css("background-color", "black");
        }
    });
}

希望它能解决您的问题!