Question

以下是不起作用的部分：

function showDetailedView(element) {

  var img = document.getElementById(element);
  img.className = "imgPopout";
  img.innerHTML = "<br /><TABLE><TR><TH rowspan='3'><img src='aprilla/" + element + ".jpg' width='250'><TH align='left'>Artist's Name: <TH align='left'>Aprill Aronie<TR><TH align='left'>File Name: <TH align='left'>pic3.jpg<TR></TABLE>"
  var popOut = document.getElementById(element);
  popOut.onmouseout = hideDetailedView(element);
}

function hideDetailedView(element){

   var img = document.getElementById(element);
   img.className = "imgPopin";
   img.innerHTML = "";
}

popOut.onmouseout总是会触发hideDetailedView（），即使我的鼠标位于由id'元素'表示的div上。我不知道为什么会发生这种情况。请不要jquery，这是学校的事情，我无法理解。

如果您需要，这是完整的代码：

function initPopout(element) {

  var thumb = document.getElementById(element); 
  thumb.onmouseover = showDetailedView(element);
}

function showDetailedView(element) {

  var img = document.getElementById(element);
  img.className = "imgPopout";
  img.innerHTML = "<br /><TABLE><TR><TH rowspan='3'><img src='aprilla/" + element + ".jpg' width='250'><TH align='left'>Artist's Name: <TH align='left'>Aprill Aronie<TR><TH align='left'>File Name: <TH align='left'>pic3.jpg<TR></TABLE> "
  var popOut = document.getElementById(element);
  popOut.onmouseout = hideDetailedView(element);
}

function hideDetailedView(element){

   var img = document.getElementById(element);
   img.className = "imgPopin";
   img.innerHTML = "";

 }

它由以下内容触发：

<img src="aprilla/pic1thumb.jpg" onClick="initPopout(1);"><div class="imgPopin" id="1"></div>

有大约15张图片，每张图片的ID为1-15，每张图片都调用各自的initPopOut（IDnumber）

Answer 1

popOut.onmouseout = hideDetailedView(element); // Mistake!

函数hideDetailedView返回undefined。如果你想要一个带有值的函数，你可以用闭包来做这个：

function hideDetailedView(element){
    return function() {
        var img = document.getElementById(element);
        img.className = "imgPopin";
        img.innerHTML = "";
    }
}

现在返回值是一个函数。

与showDetailedView函数相同。

.onmouseout似乎在它不应该被解雇时

1 个答案: