質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

3回答

5593閲覧

onclickが子要素まで適用されて困っています。

退会済みユーザー

退会済みユーザー

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2016/07/11 07:29

html

1 <div onclick="test()" id="fade" style="position: relative; top:0px; left:0px; width:100%; height:100%; background-color:#000000;"> 2 <div id="box" style="position: absolute; text-aling:center; top:13%; left:31%; height:75%; width:40%; border: 3px solid white; background-color:white; border-radius: 35px;"></div> 3</div>

javascript

1<script type="text/javascript"> 2 function test(){ 3 document.getElementById("fade").style.display="none"; 4 document.getElementById("box").style.display="none"; 5 } 6</script>

今はid="box"をクリックしてもonclickが反応してしまいます。
id="fade"だけonclickが効くようにしたいです。
お願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

あっさりと、こんなかんじでどうだろうか。

html

1<div id="box" onclick="event.cancelBubble=true" ...

投稿2016/07/11 08:11

編集2016/07/11 08:31
matobaa

総合スコア2493

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

matobaa

2016/07/11 09:22

三者三様。/document/#fade/#box というDOMツリーにおいて、yambejp さんは documentまで上げてevent.targetで分岐。 mty.adさんは #fadeで受け取って自分の分だけを処理してそれ以外はスルー。matobaaは #box で握りつぶす。実に面白い。
退会済みユーザー

退会済みユーザー

2016/07/11 21:17

たったこれだけの作業でこれだけのやり方があるなんて、おもしろいです!! 上手くいきました! ありがとうございます!
guest

0

こんな感じで内側のクリック後の作業を無効化すればすればいいでしょう

HTML

1<script> 2try{ 3document.addEventListener ('click',function(e){myfunc(e)},true); 4}catch(e){ 5document.attachEvent('onclick',function(e){myfunc(e)}); 6} 7function myfunc(e){ 8 var t = (e.srcElement || e.target); 9 if(t.id=="box"){ 10 alert(1); 11 if(e.preventDefault)e.preventDefault(); 12 else e.returnValue = false; 13 }else if(t.id=="fade"){ 14 alert(2); 15 } 16} 17</script> 18<div id="fade" style="position: relative; top:0px; left:0px; width:100%; height:100%; background-color:#000000;"> 19<div id="box" style="position: absolute; text-aling:center; top:13%; left:31%; height:75%; width:40%; border: 3px solid white; background-color:white; border-radius: 35px;"></div> 20</div>

投稿2016/07/11 08:03

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

matobaa

2016/07/11 09:12

冒頭にでてくる function(e){myfunc(e)} は単に myfunc だけでよさそう。よくわかっていませんが
guest

0

HTML

1 2<div id="fade" style="position: relative; top:0px; left:0px; width:100px; height:100px; background-color:#000000;"> 3<div id="box" style="position: absolute; text-aling:center; top:13%; left:31%; height:75%; width:40%; border: 3px solid white; background-color:white; border-radius: 35px;">sss</div> 4</div> 5<script type="text/javascript"> 6var p = document.getElementById('fade'); 7p.addEventListener('click', test, false); 8function test(e){ 9 switch(e.srcElement.id) { 10 case "fade": 11 document.getElementById("fade").style.display="none"; 12 document.getElementById("box").style.display="none"; 13 break; 14 } 15} 16</script>

投稿2016/07/11 08:01

mty.ad

総合スコア145

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問