重ねたレイヤの下レイヤへのマウス入力の無効化

[新着] Webテンプレートを仮オープンしました

0   名前： なおき ： 2007/06/23（土） 11:11  ID:/K6F50yo sub-HP
下のように div によるレイヤを二枚重ねます．
青色の領域をクリックするとアラートを表示させたいのですが，
下のレイヤに表示された「あいう」の部分にマウスを持っていくと，
（そちらへの入力が優先されてしまい）
カーソルはキャレットになって，クリックをしてもアラートが出ません．
下のレイヤへの入力を無効にすることはできないのでしょうか？

<html>
<head>
<script language="javascript">
<!--
function mousedown()
{
alert("MouseDown");
}
-->
</script>
</head>
<body>
<div id="l1" style="z-index:1; width:100; height:100; background-color:blue;" unselectable="on">あいう</div>
<div id="l2" style="z-index:2; width:100; height:100;" unselectable="on" onmousedown="mousedown()"></div>
</body>
</html>


IE7で確認しています．
1   名前： 匿名 ： 2007/06/23（土） 11:11  ID:Ketd2UdV sub-Cz
「レイヤ」ってのが何のことかはともかく div 要素ボックスは別に重なってないし、HTML の書き方も CSS の書き方もおかしいし、何だかさっぱり分からない。

もう少し再現性のあるソースコードを書いて下さい。また、IE 専用の Web アプリなら、その旨書いて下さい。
2   名前： なおき ： 2007/06/23（土） 11:11  ID:MOUtAUzg sub-t1
ちなみに，Firefox では正常に動作します．
3   名前： 匿名 ： 2007/06/23（土） 11:11  ID:Iq7prWSS sub-pq
<html>
<head>
<script language="javascript">
<!--
function mousedown(){

window.alert("MouseDown");

}
-->
</script>
</head>
<body>
<div id="l1" style="z-index:1; position:absolute; top:0px; left:0px; width:100; height:100; background-color:blue;" unselectable="on">あいう</div>
<div id="l2" style="z-index:2; position:absolute; top:0px; left:0px; width:100; height:100;" unselectable="on" onclick="mousedown()"></div>
</body>
</html>

とか、どうですか。
4   名前： 匿名 ： 2007/06/23（土） 11:11  ID:x3eFWcQP sub-Cz
>>0,2
>>0 は当方の IE6 で動作する。何が問題なのか分からない。

>>3
× <script language="JavaScript">
△ <script type="text/javascript">

・DOCTYPE 宣言と title 要素がなければ HTML の体をなさない。省略したければ省略可能な html、head、body の開始タグと終了タグを省略すべき。省略できるものは好きなだけすれば良いが、省略できないものを省略してはいけない。
・width と height にも単位が必要。
5   名前： 匿名 ： 2007/06/23（土） 11:11  ID:x3eFWcQP sub-Cz
>>4
訂正：IE6 → IE7
6   名前： なおき ： 2007/06/23（土） 11:11  ID:MOUtAUzg sub-t1
＞３
ありがとうございます．

でも，だめですねぇ．
Firefox では大丈夫ですが，IE7 では「あいう」の上でクリックしてもアラートが出ませんね．
IE の仕様なのかなぁ．．
7   名前： なおき ： 2007/06/23（土） 11:11  ID:MOUtAUzg sub-t1
あ！
absolute; top:0px; left:0px;
を抜いちゃっていたんですね．
余計な記述をぬいているときに，抜き間違ってました．

ただ，６にも書きましたが，だめですね．
IE だと，下に位置する div に文字列があると，
そちらにイベントがとられてしまうようで．．．．

たとえば，
<div id="l1" style="z-index:1; position:absolute; top:0px; left:0px; width:100; height:100; background-color:blue;" unselectable="on" onclick="mousedown2()">あいう</div>
とすると，文字列上でクリックした場合は，mousedown() ではなく mousedown2() が呼ばれます．

IE の仕様なんですかねぇ．．．
8   名前： 匿名 ： 2007/06/23（土） 11:11  ID:3HnCq4Ds sub-Cz
もう一度だけ言うが、再現性のあるソースコードを出してくれ。

>>0 ではそもそもボックスが重なっていない。>>3 の修正では「あいう」が前面に出るはずがない。z-index を入れ替えれば似たような現象になるが『Firefox では大丈夫』にはならない。

現状では、問題の原因とは関係ない部分を見せられているようにしか思えない。貴方の環境では本当に >>0、>>3 のコードで問題が再現するのか？

それから、繰り返すが CSS の width、height は単位が必須だ。データの形式にもう少し敏感になった方が良い。
一覧へ戻る