0

Web ページ上にフルスクリーンのキャンバスがあります。サイズは 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;
}
4

1 に答える 1

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>
于 2013-03-10T15:46:43.070 に答える