最近、HTML5 ゲームフレームワークを書きました。今日はマルチレイヤーのクリックイベント監視について書きました。かなり楽しいと思います。したがって、モジュールから抽出されました。次のコードは単なるアイデアです。具体的な実装は確かにそれほど醜いものではありません コードをコピーします コードは次のとおりです: ;ドキュメント <br>位置: 絶対; <br> 🎜></head> <br><body> <br><div class="box"> <br><キャンバス id="layer1" width="200" height="200"> </canvas> <br><canvas id="layer2" width="500" height="500"><br></div><br><スクリプト タイプ=" text/javascript"> <br>function getRect(obj) { <br>var x1 = obj.offsetLeft; <br>var y1 = obj.offsetTop; <br>var x2 = x1 obj.offsetWidth; <br>var y2 = y1 obj.offsetHeight ; <br>return { <br>x1: x1, <br>y1: y1, <br>x2: x2, <br>y2: y2 <br>} <br>関数 inside(x, y, rect) { <br>if(x>rect.x1 && x<rect.x2 && y>rect.y1 && y<rect.y2) { <br />return <br /> <br />else { <br />return false; <br />} <br />} <br />var トリガー = {}; <br />trigger.listen = function() { <br />var list =trigger.list; <br />document.addEventListener('click',function(evt) { <br />for(var i=0; i<list.length; i) { <br />list[ i](evt); <br />} <br />}; <br />var l1 = document.getElementById('layer1'); = document.getElementById('layer2'); <br />var dl1 = function(evt) { <br />if(inside(evt.clientX, evt.clientY, getRect(l1))) { <br />console.log( 'クリック'); <br />} <br />} <br />trigger.list.push(dl1); <br />var dl2 = function(evt) { <br />if(inside(evt.clientX, evt.clientY) , getRect(l2)) ) { <br />console.log('click2'); <br />} <br />} <br />trigger.list.push(dl2); ></body><br></html></div>
