javascript onclick,匿名函数

Posted

技术标签:

【中文标题】javascript onclick,匿名函数【英文标题】:javascript onclick, anonymous function 【发布时间】:2010-11-06 21:24:40 【问题描述】:

我是一名初级 javascript 程序员。我正在尝试创建类似于 Lightbox 2 的东西,但要简单得多。我想自己从头开始做这件事的唯一原因是我可以学习。但是,我一直停留在显示图像的最后一个关键部分。我相信问题在于我尝试使用 onclick 并分配给匿名函数:elem[i].onclick = function ()liteBoxFocus(imgSource,imgTitle);返回假;; 。如果您运行我的代码并尝试单击 google 徽标,它将显示 yahoo 徽标和标题,而不是 google 的徽标和标题。但是,当您单击雅虎徽标时,它可以正常工作,因此匿名函数似乎仅适用于最后一个循环。提前谢谢!!!

为了您的方便,我已将整个 CSS/JS/Xhtml 放在一个页面中。

埃里克的剧本 【参考方案1】:

您的事件处理程序形成一个闭包,该闭包记住一个“活动”指针,该指针指向封闭范围内的变量。所以当它们实际执行时,它们具有最后一个值imgSourceimgTitle

相反,您可以使用此模式来本地化变量值。这将在每次调用 getClickHandler 时创建源和标题的副本。因此,返回的函数会记住循环迭代中的值。

//Check those anchors with rel=litebox
for(i = 0;i < elem.length;i++)
    if(elem[i].rel == "litebox")
        imgSource = elem[i].href.toString();
        imgTitle = elem[i].title;
        elem[i].childNodes[0].style.border="0px solid #fff";
        elem[i].onclick = getClickHandler(imgSource, imgTitle);
    



//Brings up the image with focus
function getClickHandler(source,title)
    return function() 
        document.getElementById("liteBox").style.display = "block";
        document.getElementById("liteBox").innerHTML = "<h1>" + title + "</h1>" +
                                               "<img src='" + source + "'/><br />" +
                                               "<a href='#' onclick='liteBoxClose();'><img src='images/litebox_close.gif' border='0' alt='close'/></a>";
        document.getElementById("liteBoxBg").style.display = "block";
    

【讨论】:

以上是关于javascript onclick,匿名函数的主要内容,如果未能解决你的问题,请参考以下文章

匿名函数如何在 React 组件中的 onClick 中工作?

JS教程07事件属性及匿名函数

JavaScript 匿名函数和闭包

Javascript自执行匿名函数(function() { })()的原理浅析

JavaScript中的匿名函数立即执行函数和闭包

javascript匿名函数与闭包