2009-11-01 37 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或原型)多么容易让你的生活。关于框架的另一个关键问题是,他们通常会对所有这些跨浏览器问题思考冗长而艰难,因此您不必这样做。