Comment détecter mousein et mouseleave en JavaScript?

Je ne peux pas utiliser jQuery pour cette partie du projet pour des raisons diverses. J'ai DONC besoin de le détecter dans vanilla js. J'ai essayé ceci mais ça ne fonctionne pas:

http://jsfiddle.net/qHfJD/

var myDiv = document.getElementById('foo');

myDiv.onmouseenter = function() { 
    alert('entered');
}

myDiv.onmouseleave = function() { 
    alert('left');
}
question peut aider à expliquer la différence entre les événements.

OriginalL'auteur TK123 | 2013-03-07

  1. 2

    mouseenter et mouseleave sont la propriété de MS événements (qui sont en fait assez agréable). Si myDiv n'a pas d'enfants, à l'aide de mouseover /mouseout aura exactement le même effet.

    http://jsfiddle.net/qHfJD/1/

    Remarque: cette approche originale de la question et la réponse sont très vieux et à une époque où les mouseenter et mouseleave n'ont pas été bien pris en charge en dehors de l'ei. Tous les navigateurs modernes ont pris en charge ces événements sur les éléments pour un certain temps maintenant. Ils sont généralement préférés mouseover/mouseout parce que celui-ci se déclenche pour chaque enfant de l'élément avec l'écouteur d'événement en plus de l'élément lui-même.

    cela ne répond pas à la question, qui a précisé souris "dans" et "quitter". Mouseover exécute plusieurs fois sur les éléments qui contiennent les enfants. Le plus proche de la réponse, je crois, a été donné par roulement sur 3 Février.

    OriginalL'auteur Explosion Pills

  2. 3

    La mouseenter et mouseleave événements sont la propriété de Internet Explorer, si vous n'êtes pas en utilisant IE, ils ne fonctionnent pas. Utilisation mouseover et mouseout, à la place.

    Par la manière, vous pouvez utiliser mouseenter et mouseleave via jQuery parce que jQuery simule ces événements pour vous sur la non-IE navigateurs. Voir cet article pour des conseils sur la manière de simuler mouseenter et mouseleave pour vous-même.

    OriginalL'auteur dgvid

  3. 3
    myDiv.onmouseover = function(event) {
  if (this != event.currentTarget) { return false; }
  //mouse enter ...
}
myDiv.onmouseout = function(event) {
  if (this != event.currentTarget) { return false; }
  //mouse leave ...
}

    OriginalL'auteur ride

  4. -1

    Vous sont proches. Le nom de la fonction onmouseover et onmouseout

    var myDiv = document.getElementById('foo');

myDiv.onmouseover = function() { 
  alert('entered');
}

myDiv.onmouseout = function() { 
  alert('left');
}
    mouseover et mouseenter sont deux choses différentes.

    OriginalL'auteur dremme

  5. -2

    Essayer:
    var myDiv = document.getElementById('foo');

    myDiv.onmouseover = function() { 
    alert('entered');
}

myDiv.onmouseout = function() { 
    alert('left');
}

    onmouseenter et onmouseleave sont IE seule fonctionnalité.

    OriginalL'auteur dchiang