• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:/*@cc_on@*/)

条件付きコンパイルステートメントを使用したaddEventListenerとattachEventの切り替え

このQ&Aのポイント
  • 条件付きコンパイルステートメントを使用してaddEventListenerとattachEventを切り替える方法について教えてください。
  • IEで動作確認をすると、「サポートされていないオブジェクトまたは、メソッドです」というエラーが表示されます。
  • if文で書き換えると、「value」がNULLまたはオブジェクトではないというエラーが表示されます。

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

  • ベストアンサー
  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

どこかで見たような… と思ったら私の回答のようですね。 >教えていただいたソース>selectメニューに応じてdivを変換する ><!--/*@cc_on @*/      ↓ <!-- /*@cc_on@*/ (改行のあるなしで変わります) 回答をもう一度ご確認ください。  http://okwave.jp/qa/q6524472.html

momohiyopapa
質問者

お礼

fujillin先生!!ありがとうございます。これでいけました。色々と試行錯誤していたのがウソみたいに動作しました。ほんとうにありがとうございます。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

#1です。 某所で、このスクリプトだと複数回initを呼び出すと都合が悪くなることを指摘されたのを思い出しました。(失念してました) なので、応急処置。(init部分を以下にいれかえ) changer.init = function(id, ids){  var sel = document.getElementById(id);  if(!sel || sel.nodeName != "SELECT") return;  this.target = ids.split(",");  this.set(sel.value);  sel. /*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/ 'change', changer, false);  changer.init = new Function; } 本来なら複数の呼び出しに対応するべきですが、単に2回目以降を無効にしただけというお粗末な「応急処置」です。 お粗末だけれど、無いよりはよいだろうということで・・・

momohiyopapa
質問者

お礼

fujillin先生ありがとうございます。前述の改行の処理で上手く動作してくれましたので、この応急処置の方法は知識として私のEvernote行きとなりました。前回に引き続きご回答いただき、ありがとうございました。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • ロールオーバー時の画像切り替えについて

    複数の画像ボタンを配置し、 ロールオーバーするとある位置に配置している画像を切り替えるようにしているのですが、 現状だとロールアウト後に初めの画像、初期値に戻ってしまうので 一番最後にロールオーバーした画像でストップさせたいと思っています。 現状、下記スクリプトを設置しているのですが お分かりの方が追われましたらご教授頂けないでしょうか。 どうぞ宜しくお願いします! MultiRollover = function(_listener) { this.listener_id = _listener; this.target_id = ""; this.sources = []; } MultiRollover.prototype = { addTarget: function(_target) { this.target_id = _target; }, addSource: function() { for(var i=0; i<arguments.length; i++) { this.sources.push(arguments[i]); } }, create: function() { var listener = document.getElementById(this.listener_id); if(document.getElementById(this.target_id)) { var out_target = document.getElementById(this.target_id); var over_targets = out_target.getElementsByTagName("a"); } for(var i=0; i<over_targets.length; i++) { var over_target = over_targets[i]; var src = this.sources[i]; var callback = (function(_src) { return function() { this.src = _src; }; })(src); this.observe(over_target, "mouseover", listener, callback); (new Image).src = src; src = this.sources[0]; callback = function() { this.src = src; }; this.observe(over_target, "mouseout", listener, callback); } }, observe: function(_el, _func, _listener, _callback) { if(_el.addEventListener) { _el.addEventListener(_func, function(e) { _callback.call(_listener, e); }, false); } else if(_el.attachEvent) { _el.attachEvent("on"+_func, function(e) { _callback.call(_listener, e); }); } } }

  • IEでF12を押さないとjavascriptが…

    javascript初心者です。 サイトのログインページに、 IDとpasswordを保存する機能をを作りたいと考えています。 プログラムからjavaccriptを呼び出しているのですが、 IEからそのjavascriptが読み込まれなくなってしまいました。 (Chrome,FireFox,Operaでは正しく動作しています。) F12を押してIEの開発者ツールを立ち上げると、正しく動作するようになります。 なぜ、F12を押さないと呼ばれないのかが、 さっぱりわからず、教えていただけないでしょうか。 htmlソースにも記述されています。 呼び出し元は、tclです。 <script language="JavaScript"> var rwAuthInfo = { conf : { kwordId : 'auth_id', kwordPass : 'auth_pass', savePeriod : 120, idElemKey : 'authId', passElemKey : 'authPass', chkElemKey : 'authSave' }, CookieWrite : function(kword, kdata, kday) { if (!navigator.cookieEnabled) { return; } var sday = new Date(); sday.setTime(sday.getTime() + (kday * 1000 * 60 * 60 * 24)); var s2day = sday.toGMTString(); document.cookie = kword + "=" + escape(encodeURIComponent(kdata)) + ";expires=" + s2day + ";path=/"; }, CookieRead : function(kword) { if (typeof(kword) == "undefined") { return ""; } kword = kword + "="; var kdata = ""; var scookie = document.cookie + ";"; var start = scookie.indexOf(kword); if (start != -1) { end = scookie.indexOf(";", start); kdata = decodeURIComponent(unescape(scookie.substring(start + kword.length, end))); } return kdata; }, getAuthInfo : function() { console.log("get auth info"); var myPass = decodeURIComponent(unescape(rwAuthInfo.CookieRead(rwAuthInfo.conf.kwordPass))); var obj1 = document.getElementsByTagName('input'); for(i = 0; i < obj1.length; i++){ if ( obj1[i].id == rwAuthInfo.conf.passElemKey && myPass != "" ) { obj1[i].value = myPass; } } var myId = rwAuthInfo.CookieRead(rwAuthInfo.conf.kwordId); var obj2 = document.getElementsByTagName('input'); for(i = 0; i < obj2.length; i++){ if ( obj2[i].id == rwAuthInfo.conf.idElemKey && myId != "" ) { obj2[i].value = myId; } } console.log("From cookie - id: " + myId + ", password: " + myPass); }, saveAuthInfo : function() { console.log("save authentication info"); var objChk = document.getElementById(rwAuthInfo.conf.chkElemKey); if ( objChk.type == "checkbox" && objChk.checked ) { var obj1 = document.getElementById(rwAuthInfo.conf.passElemKey); if ( obj1.value != null && obj1.value != '' ) { var myPass = escape(encodeURIComponent(obj1.value)); console.log("password: " + obj1.value + ", encoded: " + myPass); rwAuthInfo.CookieWrite(rwAuthInfo.conf.kwordPass, myPass, rwAuthInfo.conf.savePeriod); } var obj2 = document.getElementById(rwAuthInfo.conf.idElemKey); if ( obj2.value != null && obj2.value != '' ) { var myId = escape(encodeURIComponent(obj2.value)); rwAuthInfo.CookieWrite(rwAuthInfo.conf.kwordId, myId, rwAuthInfo.conf.savePeriod); } } }, addSubmitEvent : function() { for ( i=0; i<document.forms.length; i++ ) { var frm = document.forms[i]; try { frm.addEventListener('submit', rwAuthInfo.saveAuthInfo, false); } catch (e) { frm.attachEvent('onsubmit', rwAuthInfo.saveAuthInfo); } } }, addLoadEvent : function() { try { if (window.addEventListener) { window.addEventListener('load', rwAuthInfo.getAuthInfo, false); window.addEventListener('load', rwAuthInfo.addSubmitEvent, false); } else if (window.attachEvent) { var isMSIE = /*@cc_on!@*/0; if (isMSIE) { window.attachEvent('onload', rwAuthInfo.getAuthInfo); window.attachEvent('onload', rwAuthInfo.addSubmitEvent); window.attachEvent('load', rwAuthInfo.getAuthInfo); window.attachEvent('load', rwAuthInfo.addSubmitEvent); } else { window.attachEvent('onload', rwAuthInfo.getAuthInfo); window.attachEvent('onload', rwAuthInfo.addSubmitEvent); } } } catch (e) { console.error("got error in addLoadEvent: " + e); window.attachEvent('onload', rwAuthInfo.getAuthInfo); window.attachEvent('onload', rwAuthInfo.addSubmitEvent); } } } rwAuthInfo.addLoadEvent(); </script>

  • ロールオーバーについて

    ロールオーバーをシンプルなjavascriptで実装するとの事でとあるサイトにて、以下のようなスクリプトがありました。 http://css-happylife.com/archives/2007/0621_0010.php ▼▼▼スクリプト▼▼▼ function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } ▲▲▲スクリプト▲▲▲ DOMを使ってimgのソースを 画像「_off.」から「_on.」に書き換えているんだなということまではわかるのですが、 if(document.getElementsByTagName) とか、 if(window.addEventListener) 等の記述があります。 ifのあとの()の中身は i>0 や (i>5)&&(i<=10) 等、演算子を用いた条件を記述するタイプした目にしたことがないのですが、 これはどういった事を表しているのでしょうか? ご教授お願いいたします。

  • オブジェクトがありません

    オブジェクトがありませんとエラーが出てしまいます。 operaやNetscapeは動くようなのですがIEは動きません。 document.getElementById(target).style.top = y-offx+"px"; の部分でエラーがでるようなのですが。 出さないためにどうすれば良いかが、分かりません。 よろしくお願いします。 <html> <head> <title>ドラッグして移動する</title> <script type="text/javascript"><!-- if(window.addEventListener)window.addEventListener("load",loadScript,false); if(window.attachEvent)window.attachEvent("onload",loadScript); //関数ロード function loadScript(){ ///ドラッグ用ロード flag=false; Menu=new Array("menu1","menu2","menu3"); for(i=0;i<Menu.length;i++){ XMenu=window.document.getElementById(Menu[i]) if(XMenu.addEventListener)XMenu.addEventListener("mousedown",dragOn,false); if(XMenu.attachEvent)XMenu.attachEvent("onmousedown",dragOn); } } //ドラッグ関数 function dragOn(){ flag=true; target=this.id; ///移動 if(window.document.addEventListener)window.document.addEventListener("mousemove",dragMove,false); if(window.document.attachEvent)window.document.attachEvent("onmousemove",dragMove); ///終了 if(window.document.addEventListener)window.document.addEventListener("mouseup",dragOff,false); if(window.document.attachEvent)window.document.attachEvent("onmouseup",dragOff); } function dragMove(evt){ if (!flag) return; if (window.createPopup){ x = event.x + document.body.scrollLeft; y = event.y + document.body.scrollTop; }else{ x = evt.pageX; y = evt.pageY; } offx = 60; offy = 75; document.getElementById(target).style.top = y-offx+"px"; document.getElementById(target).style.left = x-offy+"px"; return false; } function dragOff(){flag=false;} // --></script></head> <body> <!-- 各メニューで自分自身をドラッグ開始するように,関数を呼ぶ --> <div id="menu1" style="background-color:red; position:absolute; width:120px;height:150px;" >メニュー1</div> <div id="menu2" style="background-color:green; position:absolute;top:200px;width:120px;height:150px;" >メニュー2</div> <div id="menu3" style="background-color:blue; position:absolute;top:400px;width:120px;height:150px;">メニュー3</div> <div id="menu4" style="background-color:yellow; position:absolute;top:200px; left:200px;width:120px;height:150px;">メニュー4</div> </body> </html>

  • テキスト内容の変化でイベント発生

    下記のようなコードでイベントを発生したいと考えています。 キーボードによる打ち込みではなく、文章をコピー&ペーストすることで 「firstBox2」の表示を消し、「secondBox2」を表示させたいと考えています。 ご教授お願いします。 <input id="target_input" type="text" value="" /> <select id="firstBox2"> <option value="select1">-----</option> <option value="select2">------</option> </select> <select id="secondBox2" style="display:none;"> <option value="select1">午前中</option> <option value="select2">2度目以降の利用</option> </select> <script type="text/javascript"> var timer = null; var input = document.getElementById("target_input"); var prev_val = input.value; input.addEventListener("focus", function(){ window.clearInterval(timer); timer = window.setInterval(function(){ var new_val = input.value; if(prev_val != new_val){ document.getElementById('firstBox2').style.display = "none"; document.getElementById('secondBox2').style.display = ""; }; prev_value = new_value; }, 10); }, false); input.addEventListener("blur", function(){ window.clearInterval(timer); }, false); } </script>

  • smartRolloverのカスタマイズについて

    smartRollover.jsを使っています。 ロールオーバー時に 〇〇_off.jpg が〇〇 _on.jpgに画像ファイル名が変更されるようになっています。 今は、〇〇_off.jpg にロールオーバー時に〇〇_on.jpgという 画像ファイルがない場合、何も画像が表示されません。 それを〇〇_off.jpgにロールオーバーしたときに〇〇 _on.jpgの画像がない場合に、ファイル名を変更させない(〇〇_off.jpgをそのまま表示する)ようにしたいのですが、どのようにすれば良いでしょうか? よろしくおねがいいたします。 ■smartRollover.js ------------------------- function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } --------------------------

  • HTML内への2つのJavaScriptの書き込みについて

    お世話になります。 この1週間皆様のお力をお貸しいただいて ようやくほぼ完成というところまでこぎつけました!! 本当に皆様のご協力に感謝です!ありがとうございます。 HTML内に、JavaScriptファイルへのリンクが2点 そのほかにJ Queryのギャラリーを利用しているため、 HTMLに直接書いてある 下記Javascriptがあります。 $('#thumbs-adv ul.thumbs li').css('opacity', onMouseOutOpacity) .hover( function () { $(this).not('.selected').fadeTo('fast', 1.0); }, function () { $(this).not('.selected').fadeTo('fast', onMouseOutOpacity); } ); $(document).ready(function() { var galleryAdv = $('#gallery-adv').galleriffic('#thumbs-adv', { delay:2000, numThumbs:16, <省略. . . . . . > onTransitionOut:function(callback) { $('#slideshow-adv, #caption-adv').fadeOut('fast', callback); }, onTransitionIn:function() { $('#slideshow-adv, #caption-adv').fadeIn('fast'); }, onPageTransitionOut:function(callback) { $('#thumbs-adv ul.thumbs').fadeOut('fast', callback); }, onPageTransitionIn:function() { $('#thumbs-adv ul.thumbs').fadeIn('fast'); } }); var galleryMin = $('#gallery-min').galleriffic('#thumbs-min', { imageContainerSel:'#slideshow-min', controlsContainerSel:'#controls-min' }); }); ここに、まだ他のJavaScriptをHTMLページ内に 追加したいのですが、追加すると、 J queryのギャラリーの表示がなくなってしまいます。 追加したいJavaScriptは以下です。 <script type="text/javascript" charset="UTF-8"> var M0, M1; /*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/  'load', function () {   var cnt = 0, I, o;   var UL = document.getElementById('gazou');   var LI = UL.getElementsByTagName('LI');   var MI = document.getElementById('menu-index');   document.getElementById('num1').firstChild.nodeValue = I = LI.length;   for (var i = 0; i<I; i++) {    o = document.createElement('LI');    o.appendChild(document.createTextNode('○'));    o.id = 'idx-' + i;    MI.appendChild(o);   }   (M1 = LI[0]).style.zIndex = 2;  }, false); document./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/  'mouseover', function (evt) {  var e = evt./*@if(1) srcElement @else@*/ target /*@end@*/;  var p = getParent(e, 'id', 'menu-index');  var n;    if (M0) { M0.firstChild.nodeValue = '●'; M0.style.color = ''; M0 = null; }  if (p && e.nodeName == 'LI') {   e.firstChild.nodeValue = '●';   e.style.color = 'red';   M0 = e;   n = e.id.match(/-(\d+$)/)[1];   document.getElementById('num0').firstChild.nodeValue = n - 0 + 1;   Image('gazou', n);  } }, false); function getParent(node, type, val) {  return node ? (val == node[type]) ? node: arguments.callee(node.parentNode, type, val): null; } function Image (id, vno) {  var a = 100, LI = document.getElementById(id).getElementsByTagName('LI')[vno];if (LI == M1) return;  var P = (function L () {   M1.style./*@if(1) filter = 'Alpha(opacity=' + a +')' @else@*/ opacity = a/100 +'' /*@end@*/;   if ((a-=20)<0) M1.style.zIndex = 0 +'', LI.style.zIndex = 2 +'', M1 = LI; else setTimeout(L, 30);  });  LI.style.zIndex = 1;  LI.style./*@if(1) filter = 'Alpha(opacity=100)' @else@*/ opacity = '1' /*@end@*/;  P(); } // --> </script> HTML内に書き込むJavaScriptは1つでないといけないのでしょうか? また、この問題を解決するには、どうすればよいでしょうか? よろしくご教授お願いいたします!!!

  • IE8でのjavascriptエラーについて

    こんにちは。 IE8で表示されてしまうjavascriptエラーで困っています。 以前、別の方が同じような質問をされていたのですが、 理解できず新たに質問させて頂きました。 私はjavascriptに関して全くの素人です。 技術者の方、大変お手数ですが素人にも分かるような回答を頂けると とても助かります。 ロールーオーバに使用目的で以下のスクリプトをリンクしております。 // JavaScript Document function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); } 画像を2枚用意し、ロールオーバ時に●●●_on.jpg、そうでないときに ●●●_off.jpgと分けております。 マックサファリ、ファイアーフォックス、ウィンドウズIE6,7は 問題なく表示されます。 ところがウィンドウズIE8でのみ、このようなエラーが出てしまいます。 `get Attribute()` is null or not an object どうやらこの箇所が怪しいようです。 ↓ ↓ ↓ ↓ if(images[i].getAttribute("src").match("_off.")) ご回答を頂けるととても助かります。 どうぞよろしくお願い致します。

  • 教えてください!

    セレクトボックスが3つあります。 1つめのセレクトボックスがid=select1 2つめのセレクトボックスがid=select2 3つめのセレクトボックスがid=select3 valueはそれぞれ異なりますが0~3か0~5といった具合です。 全てのセレクトボックスのうち1つでもvalueが0(未選択)のものがあれば処理を中止し そうでなければ何か処理をするという分岐がしたいのですがうまくいきません。 具体的には、全てのセレクトボックスのvalueを0以外にしても$(this).val() == "0"がtrueに なってしまいます。どのようにすれば分岐できますでしょうか? ソースは以下の通りです。 $(function() { var cnt = 4; var status = false; for (var i = 1; i < cnt; i++) { $("select#item" + i).change(function() { var str = ""; $("select option:selected").each(function() { status = true; if ($(this).val() == "0") { status = false; $(".res").html('値に0がある'); } str += $(this).val(); }); }); } if (status) { //全てのセレクトボックスでvalueが0でなければ何かする alert(str); } });

  • イベントリスナーに設定した関数内で、id属性の値を取得するには

    IEでイベントリスナーに設定した関数で、イベントを発生させた要素のid属性値を取得する方法が分からずに困っています。 記述したコードは下記のようになります。Firefoxではうまく動作しました。 clickHandler内でFirefoxのe.currentTarget.idに対応するような処理はどのように行えばよいでしょうか。 ------------ JavaScript部分 ----------------------- function addEvent(elm, evType, fn, useCapture) { if (elm.addEventListener) { elm.addEventListener(evType, fn, useCapture); return true; } else if (elm.attachEvent) { var r = elm.attachEvent('on' + evType, fn); return r; } else { elm['on' + evType] = fn; } } function clickHandler(e) { var id; if (document.all && !window.opera) { // IEの場合に、ここの処理でid属性の属性地 hoge1やhoge2を取得したい。 // id = window.event.srcElement.id; これではだめ } else { id = e.currentTarget.id; } // idに応じた処理 } var elm1 = document.getElementById('hoge1'); var elm1 = document.getElementById('hoge2'); addEvent(elm1,'click',clickHandler,false); addEvent(elm2,'click',clickHandler,false); ------------ HTML部分 ----------------------- <li><a id="hoge1" href="#"><img src="●●" /></a></li> <li><a id="hoge2" href="#"><img src="●●" /></a></li> 先に進むことができずに困っています。よろしくお願いします。