.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(), даже когда моя мышь находится на элементе div, представленном идентификатором 'element'. Я не знаю, почему это происходит. Пожалуйста, не спрашивайте, это для школы, и я не могу понять это.

Вот весь код, если хотите:

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, и каждая вызывает свой соответствующий initPopOut(IDnumber)

Answer 1

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

Функция hideDetailedView возвращает неопределенное значение. Если вы хотите запустить функцию со значением, вы можете сделать это с помощью closure:

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

Теперь возвращаемое значение является функцией.

То же самое в отношении функции showDetailedView.