私の最終目標は、「マイページ」で特定のイベントをキャプチャし、他のすべてのイベントを iFrame に渡すことです。最初は、z-index を試して iFrame の上に div を配置することを想像しましたが、それはすべてのイベントをキャプチャします。このサイトのam answerからリードを得ましたが、何らかの理由で機能していないようです。私は初心者なので、おそらく非常に単純で、見えないだけです。間違いを指摘していただければ幸いです。
これが私のテストです：
<script language="javascript" type="text/javascript">
function fH() {alert("a trunk, Hello World!");}
function fG() {alert("a branch, Goodbye Moon!");}
function fS() {alert("a leaf, Here comes the sun!");}
function RightMouseDown() {return false;}
x=document.getElementById("b");
x.addEventListener('click','fH()',false);
</script>
<body>
<div id="trunk" onmousedown="fH()"> <p id="branch" onmousedown="fG()">Stout and strong, <em onmousedown="fS()">green and broad</em></p></div>
<div id="t"><p id="b">Stout and strong, <em id="l">green and broad</em></p></div>
</body>
- 最初の div で [green and wide] をクリックすると、S、G、H のアラートが表示されます - バブル (Firefox & Chrome)
- 逆にしてキャプチャしたいので、 x=doc... と x.addEv... がそれを行うと思ったのですが、2番目のdivでアクションがありませんか???
提案を確認するための 2 番目のテスト:
<body>
<div id="iframe" onmousedown="fH()"><h3>iFrame</h3></div>
<div id="wpane" onmousedown= "fG()"><h3>wPane</h3></div>
<body>
CSS:
#iframe {color: blue; position: absolute; border: 1px solid blue; top: 100px; left: 100px; z-index: 0;}
#wpane {color: black; border: 1px solid black; position: absolute; top: 115px; left: 135px; z-index: 0; opacity: 0;}
「見えない要素」が何かわからないようです...