[英]ignore full screen canvas
我在網頁上全屏顯示畫布。 大小在processing.js中處理。
<div id="canvasDiv">
<canvas id="processingCanvas" data-processing-sources="resources/processing/canvas01.pde"> </canvas>
</div>
畫布后面是許多文字。 問題是我無法在iPad上滾動,因為畫布在頂部。 有沒有辦法忽略畫布,但仍將其顯示在頂部? 這是當前的CSS:
#canvasDiv {
position: absolute;
left: 0;
z-index: 999;
}
#processingCanvas {
position: fixed;
top: 0;
left: 0;
}
這是讓元素陷入基礎元素的方法:
如果瀏覽器是Chrome,Firefox,Safari,Blackberry或Android,但不是IE或Opera,則可以使用指針事件告訴畫布不要處理單擊/觸摸事件,然后單擊/觸摸將由底層元素處理。 因此,在CSS中:
#topCanvas{ pointer-events: none; }
但是在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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.