Html 忽略全屏画布_Html_Canvas

Html 忽略全屏画布

html canvas

Html 忽略全屏画布,html,canvas,Html,Canvas,我在网页上有一个画布全屏。大小在processingjs中处理 <div id="canvasDiv"> <canvas id="processingCanvas" data-processing-sources="resources/processing/canvas01.pde"> </canvas> </div> 以下是如何让元素深入到底层元素：如果浏览器是Chrome、Firef

我在网页上有一个画布全屏。大小在processingjs中处理

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

以下是如何让元素深入到底层元素：

如果浏览器是Chrome、Firefox、Safari、Blackberry或Android，而不是IE或Opera，则可以使用指针事件通知画布不要处理单击/触摸事件，然后单击/触摸将由底层元素处理。所以在CSS中：

但在IE和Opera中，你必须要有技巧：

隐藏顶部画布
在底部元素上触发事件
显示顶部画布

此代码显示如何在基础元素上触发事件：

<!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>


正文{背景色：象牙；}
#包装{宽度：200；高度：200；}
#底部{位置：绝对；顶部：0；左侧：0；宽度：200；高度：200；背景色：红色；}
#顶部{位置：绝对；顶部：0；左侧：0；宽度：200；高度：200；背景色：蓝色；}
$（函数（）{
$（“#顶部”）。单击（函数（e）{
$（'#top'）.hide（）；
$（document.elementFromPoint（e.clientX，e.clientY））.trigger（“单击”）；
$（'#top'）.show（）；
});
$（“#底部”）。单击（函数（）{alert（“底部被单击”）；}）；
}); // end$（函数（）{}）；

 #topCanvas{ pointer-events: none; }

<!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>