9

IE8'de özel bir olayı tetiklemeye ve here ve here'dan bir çözümü birlikte çözmeye çalışıyorum. Ama ben onu çalışamıyorum ...IE8'de özel bir javascript olayı nasıl tetiklenir?

requireJS ve google analytics ile jquery mobile kullanıyorum. Bu yüzden JQM pageshow olayını izliyorum. Ancak requireJS komut dosyalarının zaman uyumsuzluğunu yüklediğinden, sayfalar arası bağlantımın javascript "sarıcı" dosyasında yapılması gerekir, aksi halde bir hata üretilir, çünkü ne jquery ne de jquery mobile snippet'in ayrıştırıldığı zaman yüklenir. Yani

Her sayfanın sonunda bu da dahil olmak üzere yapıyorum: algılandı zaman

if (document.addEventListener) { 
    document.addEventListener("jqmReady",function(){trigAnalytics("jqmReady");alert("FF detected")},false); 
} else if (document.attachEvent) { 
    document.attachEvent("jqmReady", function(){trigAnalytics("jqmReady");alert("IE detected")}); 
} 

Ve, benim analitik kovuyorum pageshow bağlayıcı pasaj: Yani

var trigAnalytics = function(trigger){ 
    $(document).on('pageshow','div:jqmData(role="page").basePage', function (event, ui) { 
     var url = location.href; 
     try { 
      hash = location.hash; 
      if (hash && hash.length > 1) { 
       _gaq.push(['_trackPageview', hash.substr(1)]); 
       _gaq.push(['_setCustomVar', 1, 'id_external', ########, 1 ]); 
      } else { 
       _gaq.push(['_trackPageview', url]); 
       _gaq.push(['_setCustomVar', 1, 'id_external', ########, , 1 ]); 
       _gaq.push(['b._trackPageview', url]); 
      } 
     } catch(err) { } 
    }); 
    if (typeof _gaq !== "undefined" && _gaq !== null) { 
     $(document).ajaxSend(function(event, xhr, settings){ 
      _gaq.push(['_trackPageview', settings.url]); 
      _gaq.push(['b._trackPageview', settings.url]); 
     }); 
    } 
}; 

için Olay zincirinin tekme, JQM hazır olduğunda jqmReady'u tetiklemem gerekiyor. JQM, sadece bunu belirtmek için mobileinit olayını kullanır. Yani benim uygulama denetleyicisi init içinde ben şöyle kendisine bağlanmasını ediyorum:

Ben mobileinit tetikleyiciler, jquery kullanılabilir olduğunda çünkü sadece, $ (pencere) .trigger ('jqmReady') tetikleme denedi
$(document).bind("mobileinit", function() { 

    // non-IE OK 
    if (document.createEvent) { 
     evt = document.createEvent("Event"); 
     evt.initEvent("jqmReady", true, true); 
     document.dispatchEvent(evt); 

    } else if (document.createEventObject) { 
    // MSIE (NOT WORKING) 

     document.documentElement.evt = 0; // an expando property 
     document.documentElement.attachEvent("jqmReady", function() { 
      document.documentElement.evt = document.documentElement.evt + 1; 
      }); 
    } 
}); 

. Ancak, addEventListener'da oluşturulan olaylar bu şekilde tetiklenemiyor gibi görünüyor, bu yüzden IE'de özel bir olayı tetiklemek için yalnızca javascript çözümüne ihtiyacım var.

Soru:
Birisi bana IE8 için bir javascript özel etkinliği doğru tetiklemek için nasıl bir işaretçi verebilir misiniz? nasıl çalıştığını

+0

neden o tetiği yerleştirmeyin $ (belge) .ready()? Buna neden ihtiyacın var? –

+0

Bu kod çalıştırıldığında 'jquery' ~ $ (document) .ready() kullanılamayacaktır. Snippet, requireJS başlatıldıktan hemen sonra sayfadadır. Yani (1) sayfası ayrıştırılır, (2) requireJS tetikleyicileri, (3) snippet'im yürütülür.Ne zaman, ne "jquery" veya "jquery-mobile" tam olarak yüklenir. Yani, sadece javascript olmalı. – frequent

+0

Sorunuzu takip ettiğimden emin değilim (bu nedenle cevap değil) ancak ['dispatchEvent()'] (https://developer.mozilla.org/en-US/docs/DOM/element.dispatchEvent) alaka? –

cevap

11

Tamam, nihayet burada ... anlamak: Sayfadaki jqmReady için dinleyici ayarı

1) Yani IE8 üzerinde ben dinlemiyorum

// non-IE: just create a listener for the custom event "jqmReady" 
if (document.addEventListener) { 
    document.addEventListener("jqmReady",function(){trigAnalytics("jqmReady");alert("FF detected")},false); 
// IE8 
} else if (document.attachEvent) { 

    // create a custom property name jqmReady and set it to 0 
    document.documentElement.jqmReady = 0; 
    // since IE8 does not allow to listen to custom events, 
    // just listen to onpropertychange 
    document.documentElement.attachEvent("onpropertychange", function(event) { 

     // if the property changed is the custom jqmReady property 
     if (event.propertyName == "jqmReady") { 
      trigAnalytics("jqmReady"); 
      alert("gotcha") 
      // remove listener, since it's only used once 
      document.documentElement.detachEvent("onpropertychange", arguments.callee); 
     } 
    }); 
} 

yükleniyor özel jqmReady. Bunun yerine benim özel mülkiyet jqmReady

2) Sonra mobileinit üzerinde böyle tetikleme ediyorum için onpropertychange dinler:

// non-IE 
if (document.createEvent) { 
     evt = document.createEvent("Event"); 
     evt.initEvent("jqmReady", true, true); 
     document.dispatchEvent(evt); 
} else if (document.createEventObject) { // MSIE 
     // just change the property 
     // this will trigger onpropertychange 
     document.documentElement.jqmReady++; 
}; 

Güzel fikir (http://dean.edwards.name/weblog/2009/03/callbacks-vs-events/ kredi), belki bir başkası bunun için bir kullanım bulabilirsiniz . başkasının ilgilenenler için

+2

'Onpropertychange' için bir dezavantajı olsa da o kabarcık değil. Hangi öğenin özelliklerinin değiştiğini önceden bilmelisiniz. Daha fazla bilgi için http://msdn.microsoft.com/en-us/library/ie/ms536956%28v=vs.85%29.aspx – dotnetCarpenter

6

, ben statik javascript nesnesine bu kodu sarılmış ettik

function Event() { 
} 

Event.listen = function (eventName, callback) { 
    if(document.addEventListener) { 
     document.addEventListener(eventName, callback, false); 
    } else {  
     document.documentElement.attachEvent('onpropertychange', function (e) { 
      if(e.propertyName == eventName) { 
       callback(); 
      }    
     }); 
    } 
} 

Event.trigger = function (eventName) { 
    if(document.createEvent) { 
     var event = document.createEvent('Event'); 
     event.initEvent(eventName, true, true); 
     document.dispatchEvent(event); 
    } else { 
     document.documentElement[eventName]++; 
    } 
} 

kullanımı:

Event.listen('myevent', function() { 
    alert('myevent triggered!'); 
}); 

Event.trigger('myevent'); 

Demo: http://jsfiddle.net/c5CuF/

+0

güzel. Özel etkinliği düzgün bir şekilde imha etmek için '.remove 'yöntemini ekleyebilirsiniz. – frequent

+2

yaptı [burada] (https://gist.github.com/frequent/6904575) – frequent

+0

güzel tek dostum: D – Elliott

İlgili konular