Question

我正在创建一个圆环（以粉色显示）以使用画布表示数据。问题是画布留下的剩余区域（图中用绿色填充）在IE和Safari中无法点击。我使用pointer-events点击了IE和Safari不支持的画布。替代解决方案是：由于应用程序的复杂UI，我更改了z-index非常难以实现。

enter image description here

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

Answer 1

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

Pure 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");
        }
    });
}

希望它可以解决您的问题！

点击画布不起作用

1 个答案: