Question

我是一个有节目问题的新手。 HTM具有网站上显示的图片的坐标，以及名为brain.js的单独Javascript文件，用于在图片鼠标悬停时显示文本。有四个象限和四组标题和摘要备注可供展示。想法是将鼠标悬停在坐标上，将鼠标悬停在该区域上，窗口显示有关该区域的信息，然后移动到原始显示清除的另一个区域并显示新的显示。

我的大多数代码都有效，但是我遇到了setupFrame函数的问题，将我的setupFrame函数的索引转移到了writeFrame函数，并且当鼠标移动到图片上的不同坐标时循环，有人能告诉我怎么做这样做？

这是我的脚本文件：

function addEvent(object, evName, fnName, cap) {  
   if (object.attachEvent)   
       object.attachEvent("on" + evName, fnName);  
   else if (object.addEventListener)   
       object.addEventListener(evName, fnName, cap);  
}

addEvent(window, "load", setupFrame, false);  
var index;  
var allAreas = new Array();    
function setupFrame() {  
   allAreas = document.getElementsByTagName("area");  
   for (var i = 0; i < allAreas.length; i++) {  
      addEvent(allAreas[i], "mouseover", writeFrame);  
      addEvent(allAreas[i], "mouseout", clearFrame);  
      allAreas.index = [i];  

   }  
}

function writeFrame() {

var areaIndex = this.index;  
   var frameWin = document.getElementById("parts");  
   var frameDoc = frameWin.contentWindow.document;  
   frameDoc.getElementById("docTitle").innerHTML = title[areaIndex];  
   frameDoc.getElementById("docSummary").innerHTML = summary[areaIndex];  
}

function clearFrame() {  
   var areaIndex = this.index;  
   var frameWin = document.getElementById("parts");  
   var frameDoc = frameWin.contentWindow.document;  
   frameDoc.getElementById("docTitle").innerHTML = "";  
   frameDoc.getElementById("docSummary").innerHTML = "";  
}

Answer 1

您是否意识到allAreas.index = [i];正在创建一个数组，并且在您阅读它时将其视为整数。我想你想放弃[和]所以它看起来像allAreas.index = i;。

当您设置索引而不是单个区域元素时，您也不会写入整个组。

allAreas.index = [i];

应该是

allAreas[i].index = i;

Answer 2

我认为epascarello发现了这个错误，但是我仍然想指出使用闭包传递索引的另一种方法：

var index = i;
addEvent(allAreas[i], "mouseover", function() {writeFrame(index);});

查看此SO post about closures in javascript

编辑：正如epascarello指出的那样，由于缺少块范围，这将无法工作，索引将始终指向同一个变量，最终总是将allAreas.length作为其值。有办法解决这个问题，但在这种情况下，最初的方法可能更简单。

Answer 3

您的代码（使用epascarello修复）适用于chrome，但不适用于IE。

问题在于：

var areaIndex = this.index;

使用addEventListener，处理程序函数会添加到元素中，因此 this 变量指向它并且您的代码符合您的预期。

但是，在IE中，使用attachEvent，它没有，而 this 变量现在指向窗口对象。

幸运的是，两种方法都将事件对象传递给处理程序，处理程序有一个指向源元素的指针。

所以，你需要做两件事。

首先，接受事件作为处理函数的参数：

function writeFrame(event)

然后，使用它来获取源元素，而不是使用它。

var areaIndex = event.srcElement.index;

Mouseover事件处理程序的文本窗口

3 个答案: