javascript - .onmouseout 似乎在不该触发的时候触发

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张左右的图片，每张图片都有1-15的id，分别调用各自的initPopOut(IDnumber)

Answer 1

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

函数 hideDetailedView 返回未定义。如果你想用一个值触发一个函数，你可以用闭包来做到这一点:

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

现在返回值是一个函数。

关于 showDetailedView 函数也是一样。