Q&A
ご回答ありがとうございます。
こちらで質問をさせていただく前に自分でいろいろ調べ勉強したので、こちらの内容は理解していました。
ただ、今回はユーザーが画像やSNSの埋め込みを使用して初めて<img id='media'>がHTMLに追加される状況で、script要素よりも前に記述するのは難しいと思ったのですが、可能なのでしょうか？
参考までに、インスタグラムの埋め込み画像をcontenteditableなtag内に挿入するコードを質問の最後に追加させていただきました。
現在リッチエディタを作成していて、addEventListenerをうまく使えなくて困っています。
具体的には以下のような状況です。
最初のHTMLはエディタ入力前なので、このような感じです。
HTML
1<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents'></div>
そしてこのエディタに入力されると、例えば以下のようになります。
HTML
1<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents'> 2 <p>aaa</p> 3 <p>bbb</p> 4 <div> 5 <img id='media' src='...'> 6 </div> 7 <p>ccc</p> 8</div>
上記のようにHTMLが変化することを見据えて、次のようなJavascriptでイベントを発生させようとしているのですが、mediaというものがまだ存在しないために「Uncaught TypeError: Cannot read property 'addEventListener' of null」というエラーが表示されてしまいます。
このような時はどのようにすればうまく動作させることができるのでしょうか？
javascript
1var media = document.getElementById('media') 2 media.addEventListener('mouseover', onMouseOver)//Uncaught TypeError: Cannot read property 'addEventListener' of null とういエラーが発生 3 4 function onMouseOver(e) { 5 console.log('100') 6 }
追加情報
ちなみに以下のようなコードでcontenteditableなタグ内に画像やSNSの埋め込みコードを入れています。
javascript
1addInstagram(e) {//画面にADDボタンがあり、ADDボタンをクリックで発火 2 var embedCode = this.instagram.value 3 4 var instagram = document.createElement('div') 5 instagram.setAttribute('id', 'media') 6 instagram.setAttribute('class', 'media-frame') 7 8 instagram.innerHTML = embedCode 9 10 var target = document.getElementById('body-text') 11 target.appendChild(instagram) 12 13 var newLine = document.createElement('p') 14 target.insertBefore(newLine, instagram.nextSibling) 15 newLine.focus() 16 17 this.instagram.value = '' 18}
回答2件
0
ベストアンサー
addEventListenerはdocumentに付加しておけば、その中のタグをつかむことができます
javascript
1<html> 2<head> 3<script> 4document.addEventListener('mouseover', function(e){onMouseOver(e)}); 5function onMouseOver(e) { 6 console.log("this is "+e.target.nodeName+ " tag"); 7} 8</script> 9</head> 10<body> 11test 12<div>test</div> 13test 14</body> 15</html>
中途半端な追記
半分ギブアップ気味ですが、ご希望もありましたので試したソースを書いておきます
とくに気に入らないのは(1)の部分chromeでは中身が空文字のpを追加できない感じです
半角スペースはもちろん、改行マークやタブでもだめです。
苦肉の策で全角スペースをいれましたが美しくないのでなんとも言えません。
また適当なダミーをいれておいて、プログラムで空に上書きしてもだめっぽいです
どなたか賢者の方が解決策をもっているかもしれないので広く意見を聞いてみてください
(2)のところはタグがほしいのでchildNodeではなくgetElementsByTagNameで
アクセスさせています。もっといい方法ありそうな気がします
一応、chromeとfirefoxでは動作確認しましたがIEは未調整です
HTML
1<script> 2document.addEventListener('click',function(e){ 3 if(e.target.id!=="add") return false; 4 var input = document.getElementById('instagram'); 5 var embedCode = input.value; 6 var instagram = document.createElement('div'); 7 instagram.setAttribute('id', 'media'); 8 instagram.setAttribute('class', 'media-frame'); 9 instagram.setAttribute('contenteditable', 'false'); 10 instagram.innerHTML = embedCode; 11 var target = document.getElementById('body-text'); 12 target.appendChild(instagram); 13 var newLine = document.createElement('p'); 14 newLine.appendChild(document.createTextNode(" "));//(1)ここがどうしようもない 15 newLine.setAttribute('contenteditable', true); 16 target.insertBefore(newLine, instagram.nextSibling); 17 target.focus(); 18 var sel = window.getSelection(); 19 var range = document.createRange(); 20 var nodes=target.getElementsByTagName("*");//(2)手抜きですがなんとか動きます 21 range.setStart(nodes[nodes.length -1], 0); 22 range.collapse(true); 23 sel.removeAllRanges(); 24 sel.addRange(range); 25 input.value = ''; 26}); 27</script> 28<div id='body-text' class='body-text' contenteditable=true data-placeholder='Body Contents'></div> 29<div class='modal instagram-modal' show={ instagramModal }> 30Embed Instagram 31<label> 32<input type='text' id='instagram' placeholder='Input Instagram embed code'> 33<button id='add'>add</button> 34</label> 35</div> 36
投稿2016/10/06 13:31
編集2016/10/07 09:13
総合スコア114769
0
getElementById は対象の要素ノードが存在しなかった時に null を返します。
script要素より後ろの要素はDOMツリーに追加されない為、<img id='media'> より後にscript要素を書けば問題は解決すると思います。
Re: Hiro14 さん
投稿2016/10/06 10:45
総合スコア18162
該当要素ノードが動的に追加されるのなら、
- 動的に追加されたタイミングで addEventListener を仕掛ける
- 上位ノードで addEventListener を仕掛けて event.target で掴む
の2通りの解決方法があります。
ありがとうございます！！
どちらも今パッとはやり方が浮かぶわけではないですが、調べてやってみます！
ちなみに、どちらが一般的だったり、優れているとかあったりしますか？
また、ここで質問させていただくのも大変失礼かもしれないのですが、上記追記コードの
var newLine = document.createElement('p')
target.insertBefore(newLine, instagram.nextSibling)
newLine.focus()
の部分で、インスタグラムの埋め込み後に<p></p>を追加して、キャレットをそこに移動させたいと思っているのですが、<p></p>は思った場所に追加されるもののキャレット移動しません。
もしこちらも原因がわかりましたら、教えていただけますと嬉しいです。。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/10/06 13:56
2016/10/06 14:02
退会済みユーザー
2016/10/06 14:07
退会済みユーザー
2016/10/06 14:12
2016/10/06 14:41
退会済みユーザー
2016/10/06 15:28
退会済みユーザー
2016/10/06 16:12
2016/10/07 01:21
退会済みユーザー
2016/10/07 08:25
2016/10/07 09:13
退会済みユーザー
2016/10/07 10:45