忽略全屏画布

Question

I have a canvas fullscreen over a webpage. 我在网页上全屏显示画布。 The size gets handled in processingjs. 大小在processing.js中处理。

        <div id="canvasDiv">
            <canvas id="processingCanvas" data-processing-sources="resources/processing/canvas01.pde"> </canvas>
        </div>

Behind the canvas is a lot of text. 画布后面是许多文字。 The problem is i can't scroll on a iPad anymore cause the canvas is on top. 问题是我无法在iPad上滚动，因为画布在顶部。 Is there a way to ignore the canvas but still show it on top? 有没有办法忽略画布，但仍将其显示在顶部？ This is the current css: 这是当前的CSS：

#canvasDiv {
    position: absolute;
    left: 0;
    z-index: 999;
}



#processingCanvas {
    position: fixed;
    top: 0;
    left: 0;
}

Answer 1

Here is how to let elements fall through to underlying elements: 这是让元素陷入基础元素的方法：

If the browser is Chrome, Firefox, Safari, Blackberry or Android, but not IE or Opera, you can use pointer-events to tell the canvas not to handle click/touch events and then the clicks/touches will be handled by the underlying elements. 如果浏览器是Chrome，Firefox，Safari，Blackberry或Android，但不是IE或Opera，则可以使用指针事件告诉画布不要处理单击/触摸事件，然后单击/触摸将由底层元素处理。 So, in CSS: 因此，在CSS中：

 #topCanvas{ pointer-events: none; }

But in IE and Opera, you have to be tricky: 但是在IE和Opera中，您必须非常棘手：

Hide top canvas, 隐藏顶部画布，
Trigger event on bottom element, 在底部元素上触发事件，
Show top canvas. 显示顶部画布。

This code shows how to trigger events on underlying elements: 此代码显示了如何触发基础元素上的事件：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
body{ background-color: ivory; }
#wrapper{ width:200; height:200;}
#bottom{ position:absolute; top:0; left:0; width:200; height:200; background-color:red; }
#top{ position:absolute; top:0; left:0; width:200; height:200; background-color:blue; }
</style>

<script>
$(function(){

    $('#top').click(function (e) {
        $('#top').hide();
        $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
        $('#top').show();
    });

    $("#bottom").click(function(){ alert("bottom was clicked."); });

}); // end $(function(){});
</script>

</head>

<body>
    <div id="wrapper">
        <canvas id="bottom"></canvas>
        <canvas id="top"></canvas>
    </div>
</body>
</html>

忽略全屏画布

问题描述

1 个解决方案

解决方案1
0 2013-03-10 15:46:43

忽略全屏画布

问题描述

1 个解决方案

解决方案1 0 2013-03-10 15:46:43

解决方案1
0 2013-03-10 15:46:43