忽略全屏畫布

我在網頁上有一個畫布全屏。大小可以在processingjs中處理。忽略全屏畫布

 <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; 
}

來源

2013-03-10 clankill3r

這裏是如何讓元素始終陷入底層元素：

如果瀏覽器是Chrome瀏覽器，火狐，Safari，黑莓或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>

來源

2013-03-10 15:46:43 markE

忽略全屏畫布

回答

相關問題