HTMLでのイベントの発生処理

2023/09/05 17:41

このQ&Aのポイント

重なった要素を扱う場合の方法を教えてください
HTMLでのイベントの発生処理について、質問としていただいた内容について簡潔にまとめます。
HTMLの要素のイベント処理において、要素同士が重なる場合に発生する問題とその対策方法について説明します。

ベストアンサー

HTMLでのイベントの発生処理

2014/05/07 21:50

以下のようなテストHTMLを作成しました ------------------------ <html> <head> <title>テスト</title> <script type="text/javascript"> function ids(e) { alert(e.id) } </script> </head> <body> <span onclick="ids(this)" id="aa" style="position:absolute; z-index:1; top:100px; left:100px; width:100px; height:100px; border:black solid 1px"> <span onclick="ids(this)" id="bb" style="position:absolute; z-index:2; right:0px; bottom:0px; height:10px; width:10px; border:red solid 1px"> </span> </span> </body> </html> ------------------------ 親spanタグ、id=aa z-index=1 (縦横100px)の中に子spanタグ、id=bb z-index=2 (縦横10px)があります id=aa の領域をclick するとアラート関数が aa と表示します id=bb の領域をclick するとアラート関数が bb 次に aa と表示しますここで、id=bb の領域をclick　したとき、親spanタグ id=aa のイベントが発生しない方法はありますか重なった要素を扱う場合の方法を教えてくださいよろしく、お願いします

neko-007
お礼率51% (28/54)

その他(ソフトウェア)
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

AsarKingChang
ベストアンサー率46% (3467/7472)

2014/05/07 22:18 回答No.1

正しい方法ではないですが、超簡単な方法を一つ <span onclick="ids(this,0)" ～～～ <span onclick="ids(this,1)" ～～～などとパラメーターを追加して、”どこからの呼び出しか？”を理解させてしまうのも手だと思います。

関連するQ&A

重なった画像にクリックイベントを発生させたい
いつも大変勉強させていただいております。かさなった画像にクリックイベントを発生させたいと苦心しておりますが、うまくいきません。スタイルシートのz-indexプロパティーで重なり位置を指定しました。以下のような記述です。  <DIV style="top:117px;left:360px;position:absolute;z-index:1;"><IMG src="00464.png" width="100" height="100" border="1"></DIV>  <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
フレームHTMLについて。
サイトを作るにあたって、画面を二分割にしようと思っていますが、どうにも作る事が出来ません。サイト様を見ても分からない上に、とりあえず解説通りに実行しても良く分からない事になる。・・そんな状態がかれこれもう4ヶ月になります。もうサイト自体を諦めようか・・と思いましたが、最後にここで質問をして諦めるかどうかを決めようと思っています。そんな私が恥を忍んでお願いをします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja">  <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title></title> <style type="text/css">  </style> </head> <body> <div class="leline"></div> <div class="leline2"></div> <div class="main"> <h1>Site Title</h1> <div class="menu">■ <a href="#">What's New</a></div> <div class="menu">■ Sitemap</div> <div class="menu"><span style="color: #AA4548">■</span> Text <span style="font-size: 8pt">- 12/13</span></div> <div class="menu">■ Photo</div> <div class="menu">■ Bookmark</div> <div class="text"> ［一言スペース］<br> <br><br><br> </div> <div class="bottom">Since 2001.12.10 // E-mail</div> </div> </body> </html> ↑これに既にフレームを付けた状態のHTMLを切実に待っています。これをインターネットで表示すると、http://wdt.pekori.jp/template/top/007/007_gray.html←の様になります。
- 締切済み
- その他([技術者向] コンピューター)
HTML の TABLE の大きさ
<table width="100" height="100"> や <table style="position:absolute; width:100px; height:100px"> のような書式を使ってもデ－タに長いものがあると、縦横 100*100 を超えた大きさに自動的になります強制的にデ－タより、小さい表示領域にすることはできますか当然、100*100 を超えた部分は表示されなくていいですよろしく、お願いします
- ベストアンサー
- ホームページ作成ソフト
アメブロ
アメブロのルームにアイフレ５つを設置したんですがどうしても４と５が表示されません・・・ TAGに間違いがあるのかもしれませんがどこが間違っているのかわかりません私のアメブロのルームです http://profile.ameba.jp/yellow-1111/ どなたかどこが間違ってるのか教えてください！ <STYLE type="text/css">#aifure4{position:absolute;top:115px;right:3500px;width:165px;height:200px;overflow:auto;padding:文字と枠の間px;background-color:枠内の背景色カラーコード;z-index:300;border:高さpx solid ;}</STYLE><div id="aifure4">ここに好きな文字を</div> <STYLE type="text/css">#aifure5{position:absolute;top:350px;right:950px;width:1650px;height:200px;overflow:auto;padding:文字と枠の間px;background-color:枠内の背景色カラーコード;z-index:300;border:高さpx solid ;}</STYLE><div id="aifure5">ここに好きな文字等を</div>
- ベストアンサー
- ブログ
.getElementByIdでnameを拾う？
javascriptで.getElementByIdでなぜかname属性を拾ってしまいます。 <script> function gets() { aa = document.getElementById('idid').innerHTML; bb=document.getElementById('idid').tagName; alert(aa+bb); } </script> <input type="submit" value="ボタン" name="idid" onclick="gets();"><span id="idid">ああああ</span> 上記は大分省略してえいますが、このようなコードで aaに「ああああ」が代入されず、bbに「INPUT」が代入されます。通常ならアラーとは「ああああSPAN」のはずが「INPUT」になってしまいます。どのような理由が考えられるでしょうか。ちなみに、HTMLページはフレーム内で表示しています。
- 締切済み
- JavaScript
写真と文字の大きさをそろえたい
ビルダーを使いながらやっているのですが二つのものを左右に並べて上下同じ大きさで表示したいのですが、下記では同じ大きさになっていると思うのですが、大きさが（上下の大きさのみ※左右は異なってよいのですが）ことなって表示されてしまいます。解決方法を教えてください。。。 <DIV style="width : 191px;height : 335px;top : 94px;left : 157px; position : absolute; z-index : 10;" id="Layer8" class="hpb-lb-tb1-cell1" align="center"> <SPAN class="hpb-body4"><SPAN STYLE="line-height:1"><span style="font-size:15pt"> <B><STRONG>ここに文字</STRONG></B></SPAN></SPAN></SPAN> </DIV> <DIV style="width : 412px;height : 295px;top : 94px;left : 347px; position : absolute; z-index : 9; " id="Layer9" class="hpb-lb-tb1-cell2" align=""><IMG src="hpb_i_top10.jpg" alt="イメージ" width="412" height="295"></DIV>
- ベストアンサー
- ホームページ作成ソフト
HTML
HTML ホームページにスピンボックスというものを設置したんです。いかがその記述なんですが、下記のURLのページをご覧ください回転して出てくるのがそれです。今は一回閉じてしまうとその後は出てこないんですが、これを三分に一回出てくるように変えたいんです。できるんでしょうか？どこをどういじればいいんですか？ <DIV id=sp1107739598196spbox style="Z-INDEX: 75; FILTER: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand'); LEFT: -1000px; VISIBILITY: hidden; POSITION: absolute; TOP: -1000px"> <TABLE style="BORDER-RIGHT: #000000 2px dotted; BORDER-TOP: #000000 2px dotted; BORDER-LEFT: #000000 2px dotted; BORDER-BOTTOM: #000000 2px dotted" cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD title=Close style="CURSOR: hand" onclick=sp1107739598196close() vAlign=center align=right bgColor=#000000><SPAN style="FONT-SIZE: 8pt; COLOR: #ffffff; FONT-FAMILY: verdana">閉じる ×</SPAN> </TD> </TR> <TR> <TD><IFRAME style="WIDTH: 380px; HEIGHT: 350px" border="0" src="pop.html" frameborder="0" allowTransparency></IFRAME> </TD> </TR> </TBODY> </TABLE> </DIV> http://www.geocities.jp/god80or20/downline/down2/downlineinr...
- ベストアンサー
- HTML
複数のfunctionをonclickで実行するには？
こんばんは。複数のfunctionを実行するにはどうしたらいいんでしょうか？後、追加でなんですが、areaにhref属性を使わず（#を指定すると、ページの上に戻ってしまうため）にポインタを指（リンクに乗せたときのやつです）にするにはどうすればいいんでしょうか？インラインフレーム１ <script>  </script> 上のfunctionを複数実行したいんです。（全てではありません） <map name=""> <area shape="rect" coords="0,0,0,0" alt="" onclick="change１('ファイル')"> ・・・ <area shape="rect" coords="0,0,0,0" alt="" onclick="change８('ファイル')"> </map> インラインフレーム２ <div style="position: absolute; top: 0px; left: 0px; z-index: 0;"><img src="ファイル" id=ＩＤ１ alt="" border="0"></div> <div style="position: absolute; top: 0px; left: 0px; z-index: 1;"><img src="ファイル" id=ＩＤ２ alt="" border="0"></div> <div style="position: absolute; top: 0px; left: 0px; z-index: 2;"><img src="ファイル" id=ＩＤ３ alt="" border="0"></div> ・・・ <div style="position: absolute; top: 0px; left: 0px; z-index: 8;"><img src="ファイル" id=ＩＤ８="0"></div> どうでしょう？自分なりに試してみたんですが、成功しませんでした。（onclickにいっぱいくっつけたりとか・・・）どうかお願いします。
- ベストアンサー
- JavaScript
liタグのナビボタンがFirefoxで二重に表示。
liタグでナビボタンを縦に３つ積みたいのですが、IEでは正しく表示しますが、何故かFirefoxでは２段めから２つずつ表示してしまい５つのナビボタンになってしまいます。どのように記述すれば良いのでしょう？ <div id="sidebar"> <ul> <li id="aaa"><a href=""><span>aaa</span></li> <li id="bbb"><a href=""><span>bbb</span></li> <li id="ccc"><a href=""><span>ccc</span></li> </ul> </div> div#sidebar { width: 245px; float:left; border-right-width: 1px; border-right-style: solid; border-right-color: #CCCCCC; } div#sidebar ul li a { display: block; } div#sidebar ul li a span { position:absolute; width: 0; height: 0; overflow:hidden; } ul li#aaa a { width: 245px; height: 60px; background-image:url(image/aa.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#bbb a { width: 245px; height: 60px; background-image:url(image/bb.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; } ul li#ccc a { width: 245px; height: 60px; background-image:url(image/cc.jpg); background-position: 10px 20px; background-repeat: no-repeat; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999999; }
- ベストアンサー
- CSS
ボタンの配置
初心者の問題ですが。。ページの中央にボタン配置したいときはどのタグ使うでしょうか。 <asp:Button id="cmdSubmit" style="Z-INDEX: 105; LEFT: 100px; POSITION: absolute; TOP: 400px"runat="server" Text="送信" Width="128px"></asp:Button> <asp:Button id="cmdCancel" style="Z-INDEX: 106; LEFT: 350px; POSITION: absolute; TOP: 400px"runat="server" Text="キャンセル" Width="128px"></asp:Button> LEFTのところcenterに変えてみたんですがだめでした。。。教えてください。よろしくお願いします。
- 締切済み
- Microsoft ASP