- ベストアンサー
重なった要素上でのイベントで下層要素を特定したい
例えば2つ以上のonclickが設定されたDIV要素が重なっている場合、 その上でクリックをするとz-index的に上にある要素しか反応しませんが、 その下にある要素も処理したい場合には、どのように特定すればいいでしょうか。 下層要素のonclick等の処理が走る必要は無く、あくまで対象要素の特定、取得ができればOKです。 各要素の座標とサイズ、及びマウス座標から算出すれば一応可能ですが、 もっとスマートな方法を探しています。
- みんなの回答 (3)
- 専門家の回答
関連するQ&A
- 要素のコピー
お世話になります。 質問なのですが、あるボタンを押下すると 指定した要素と同じ大きさの要素を作成したいのですが 可能でしょうか? あと可能であれば表示位置も同位置に表示したい。 同じ位置に重なるように表示(直下。z-index=1)が出来ればと思っております。 例えば、testがtopから100px、leftから100pxのところで表示されていたとした場合、 コピーされる要素もtopから100px、leftから100pxに表示したい。 ※位置、大きさは動的に変わります。 <script type="text/javascript"> function copy(id){ //copyの処理 } </script> <div id="test" style="z-index=10;">test<div> <input type="button" value=copy onClick="copy('test')">
- ベストアンサー
- JavaScript
- jQueryで特定の要素の表示を知りたい
iQuery 1.11.1で特定の要素が表示されたかどうかを検出したいと思います。 正確には、最初画面外にある要素が画面に入った時に処理をしたいです。 <div class="a"> 注意 </div> ブラウザをスクロールさせ、上のdivが画面内に入った時、数回点滅させすぐ止めるという処理を考えています。 画面に表示されたかどうかを知る方法を教えてください。
- ベストアンサー
- JavaScript
- 特定のclassを指定してonclickを使ったイベントを発生させる
特定の要素(例:<div id="mein">)の中にある、特定のclassを指定したリンクタグをクリックすることで、 onclickを使ったイベントを発生させたいのですが、この場合はjavascriptでどのように記述すればよいのでしょうか?
- ベストアンサー
- JavaScript
- javascriptで特定のオブジェクトのCSSの書換え
javascriptでCSSの書換えをしたいと思っているのですが、うまくいきません。 例えば、 <div class="aaa" style="z-index:0;">aaa</div> <div class="aaa" style="z-index:1;">bbb</div> <div class="aaa" style="z-index:2;">ccc</div> <div class="aaa" style="z-index:3;">ddd</div> <div class="bbb">111</div> <div class="bbb">222</div> <div class="bbb">333</div> このようにあったときに、≪z-indexの要素が1以上≫のclass="aaa"のオブジェクトを探して、該当するものの≪z-indexの値から-1する≫というような関数を作りたいのですが、ループの記述で困っています。 (prototype.jsを使うので、getElementsByClassNameは使えます。) 詳しい方、ご教授いただければ幸いです。
- ベストアンサー
- JavaScript
- jQueryで<body>要素にマウスが乗ったらイベントを起こすものを
jQueryで<body>要素にマウスが乗ったらイベントを起こすものを作りたいのですが中身のタグにもイベントを設定すると影響はありますでしょうか? 例えばBODYに触れたら動作が起きるようにします。 もちろんその中にさらに<div>などの要素がありそこにもなんらかのイベントを付与したとします。 そういった場合、動きがおかしくなる可能性はありますか? そういった設定でも特に問題ないでしょうか?
- ベストアンサー
- JavaScript
- 重なった画像にクリックイベントを発生させたい
いつも大変勉強させていただいております。 かさなった画像にクリックイベントを発生させたいと 苦心しておりますが、うまくいきません。 スタイルシートのz-indexプロパティーで 重なり位置を指定しました。 以下のような記述です。 <!-- 画像1 --> <DIV style="top:117px;left:360px;position:absolute;z-index:1;"><IMG src="00464.png" width="100" height="100" border="1"></DIV> <!-- 画像2 --> <DIV style="top:117px;left:360px;position:absolute;z-index:2;"><a href="#" OnClick="javascript:ZoomWin('00464.png');"><IMG src="big.gif" width="42" height="41" border="0"></a></DIV> 00464.pngとbig.gifという画像が重なっていて、 それぞれz-indexで指定しています。 big.gifをクリックすると、ZoomWinという関数を 発生させて、新規ウインドウを 立ち上げたいのですが、 リンクすらはれないのです。 z-indexを指定しただけでは、 <a>タグはつかえないのでしょうか? ほかに代替案があればおしえてください。
- 締切済み
- JavaScript
- position:fixedが親要素に準じて表示してくれません。。
position:fixedが親要素に準じて表示してくれません。。 <div id="relative"> <div id="flashContent"><img></div> <div id="TopBnr"><img></div> </div> ーーCSS-ーーーーーーーーーーーーーーーーーーーーーーーーーーーー #relative { position:relative; width:990px; height:374px; margin:0px auto; } #flashContent { width:990px; height:374px; margin:0px auto; z-index:0; } #TopBnr { position:fixed; width:260px; height:90px; right:90px; top:30px; z-index:1; } Ie6対応済みです。。 なぜかIeでの配置はできているのですが、 それ以外のブラウザでは、親要素に準じて配置してくれません。 どなたか解決策を教えてください。。
- 締切済み
- HTML
- テーブルのセルのクリック時、セル内の文字を太くするには
テーブルのセルをクリックした際に、セルの中に入っている文字を太字にする方法が分からず困っています。 ちょっと複雑なテーブル構造になっているのですが、具体的には、以下のような仕様で作成しています。 div要素上でクリックしたら、特定のセルの文字(この場合、id='text1'のセル)の文字を太字にしたいのです。 なお、OnClick時の処理は、外部JavaScriptで行います。 <table> <tr> <td> <div id='div1' textid='text1' onclick="ChgText(event,this)"> <table width='100%'> <tr> <td width='10%'>あああ</td> <td id='text1'>いいい</td> </tr> </table> </div> </td> <tr> </table> イベント元であるdiv要素と、処理対象のTDを関係付けるために、div要素内に「textid='text1'」定義し、外部JavaScriptでは、document.getElementByIdで処理対象を特定し、最終的には、文字を太くしたいと考えています。 外部JavaScriptの概要は以下の通りです。 function ChgText(ev,item){ var text_item = null; text_item = item.tdtext_id; var chgText = document.getElementById(text_item ); chgText.style.font-weight = bold; } 上記の内容で実行しても、文字の太さは変わりませんでした。 フォントの指定の仕方がまちがっているのでしょうか? それとも、そもそも、div要素より後に定義されるTDタグのIDをdiv要素自身が認識しないのでしょうか? 根本的な考え方が間違っているかもしれないので、よきアドバイスをいただけるとありがたいです。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- onMouseOver、onMouseOutイベントにて
質問させていただきます。 GoogleMapでリストに表示されている建物名の上に マウスカーソル乗せると、 その場所をマーカーで表示させ、 マウスをリストから外すとマーカーが消える、 という機能を作成しようとしています。 マーカーを表示したり消したりは出来るようになったのですが 動きが非常にぎこちないです。 調べてみると リンクでOnMouseイベントを発生させているタグの <a>~</a>の間に<div></div>などが間に入ると動きが ぎこちなくなることがわかりました。 普通に動く場合 <a harf="#" onMouseOver="・・・・" onMouseOut="・・・・"> 建物名<br> 住所 </a> ぎこちなく動く場合 <a harf="#" onMouseOver="・・・・" onMouseOut="・・・・"> <div class="***1">建物名</div> <div class="***2">住所</div> </a> どうも良い時はマウスカーソルが建物名と住所名を移動しても 反応しない。 ぎこちない場合、建物名から住所名にマウスカーソルが移動する 度に反応している。 CSSを使用しているため、なるべく<div>タグは外したくない。 何かいい方法が無いでしょうか? もし何かわかる方がいたら、ご教授お願いします。 何処に書いていいかわかりませんでしたが 多分ここが一番あってるかなと思ったので書かせていただきました。
- ベストアンサー
- JavaScript
- z-indexが0の要素よりも負の値の要素の方が上
に来るのでしょうか? 以下のサイトで http://ameblo.jp/coquemicot/entry-11400206825.html そう説明されているのですが、私は逆でz-indexが0の要素の方が上に来ると思うのですが・・・
- ベストアンサー
- CSS
お礼
回答ありがとうございます。 elementFromPointメソッドなんてものがあったんですね。 コードをきちんと読み取れてはいませんが、 対象と成り得る全ての要素に対して、visibility:hiddenを1つずつかけながら、 その都度elementFromPointでチェックしていく、というのが大筋でしょうか。 しかし、こういったトリッキー?なコードが出てくるということは、 やはりイベントバブリングの制御のような便利機能は提供されていないんでしょうか・・・ ありがとうございました。