2009-11-01 34 views
0

我試圖用我自己製作一個javascript畫廊腳本。 當我完成它時,我非常高興,直到我注意到它在IE6中不起作用。 在FireFox中一切都很好。所以我開始調試。JavaScript函數回調和事件

我注意到,那是的setAttribute的肯定的問題之一。甚至可能是最大的。 因此,在查看關於使用參數設置onclick屬性的暗示article之後,我很高興,但有一件事對我來說依然沒有解決。使用回調方法很棘手,但我只是不知道如何傳遞事件對象。這裏是舊的代碼示例:

var miniatury = document.getElementsByTagName ("a"); 
function zoom(){ 
    for (l = 0; l < miniatury.length; l++) { 
     if (miniatury[l].className.match("zoom") != null ) { 
      var href = miniatury[l].href; 
      if (document.images) { 
       preImg[l] = new Image(); 
       preImg[l].src = href; 
       miniatury[l].setAttribute("onclick", "przybliz(preImg["+[l]+"].src, event); event.returnValue=false; return false;"); 
      } 
      else { 
      miniatury[l].setAttribute("onclick", "przybliz(href, event); event.returnValue=false; return false;");} 
      } 
    } 
} 
function przybliz(adres, event) { 
pojemnik.style.display = 'block'; 
if (navigator.appName == "Microsoft Internet Explorer") { 
    pozycjaX= window.event.clientX + document.documentElement.scrollLeft 
     + document.body.scrollLeft; 
    pozycjaY= window.event.clientY + document.documentElement.scrollTop 
     + document.body.scrollTop; 
    } 
    if (navigator.appName != "Microsoft Internet Explorer") { 
    pozycjaX = event.clientX + window.scrollX; 
    pozycjaY = event.clientY + window.scrollY; 
    } 
pojemnik.style.top = pozycjaY+'px'; 
pojemnik.style.left = pozycjaX+'px'; 

問題是: 如何更改代碼轉換成

的onclick =回調(F,自變量)

與通過事件對象值,並有奢侈品可以在以後使用它們?

回答

1

好,用jQuery做它:

$(miniatury[l]).bind("click", preImg[l], przybliz); 

後,你可以在函數檢索:

function przybliz(evt) { 
    var adres = evt.data; 
    //... 
} 

沒有jQuery的它變得有點困難,因爲你可能需要將值存儲在閉包中,除非您小心,否則可以強制整個範圍鏈留在內存中(而不是一件好事)。

+0

這是自己做這件事的其中一個領域(如編寫多線程隊列)非常棘手。使用庫的函數來正確地使用它,因爲有更多的人測試jQuery,而不是bug測試你的應用程序。 – 2009-11-01 22:53:47

+0

謝謝安東尼。你的回答很有幫助。我的意思是現在它不工作,但我想,因爲基本的JavaScript沒有一個清晰和簡單的解決方案,我的問題...現在是我瞭解更多關於jQuery或其他庫的正確時間。不久之後,我將以不同的觀點回到這個問題。 – Luigi 2009-11-01 23:51:42

1

最好的方法是隻需向它附加一個處理程序。例如:

if (minitury.attachEvent) { 
    minitury.attachEvent("onclick", callback); 
} else { 
    minitury.addEventListener("click", callback, false); 
} 

其中callback是帶有單個參數的函數。如下所示:

function callback(evt) { 
    if (! evt) evt = window.event; 
    <insert other code here> 
} 

這應該是你想要做的。

編輯:我意識到你問的是如何發送參數化的回調。我懷疑是否有一種很好的跨瀏覽器方法,但是您可以通過向保存數據的元素添加自定義屬性並通過事件對象(evt.targetevt.srcElement)來訪問元素。確保遵循w3c爲自定義屬性設置的準則。 w3c custom attributes

+0

是的,添加自定義屬性是一種方法。但要小心地在自定義屬性中存儲對JavaScript對象的引用(存儲文本是好的),因爲這可能會泄漏IE中的內存(直到IE6中的瀏覽器關閉,直到IE7中的頁面卸載,IE8中無法確定),因爲您可能在JS中引用DOM,並引用該DOM對象中的JS對象,創建一個循環引用,IE垃圾收集器不知道它可以中斷。 – 2009-11-02 13:05:02

1

IE6是非常糟糕的方式。熟悉原始的JS是必不可少的,但最終你不會因爲瀏覽器之間的小差異而對各種各樣的設備感到困擾。

安東尼米爾斯顯示了一個框架(如jQuery或原型)多麼容易讓你的生活。關於框架的另一個關鍵問題是,他們通常會對所有這些跨瀏覽器問題思考冗長而艱難,因此您不必這樣做。