Skip to content

Moving the mouse: mouseover/out, mouseenter/leave #251

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 10, 2020
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -106,14 +106,14 @@ Si vous déplacez la souris de `#parent` à `#enfant`, vous voyez deux événeme
[codetabs height=360 src="mouseoverout-child"]
```

As shown, when the pointer moves from `#parent` element to `#child`, two handlers trigger on the parent element: `mouseout` and `mouseover`:
Comme indiqué, lorsque le pointeur passe de l'élément `#parent` à l'élément `#child`, deux gestionnaires se déclenchent sur l'élément parent : `mouseout` et `mouseover`:

```js
parent.onmouseout = function(event) {
/* event.target: parent element */
/* event.target: élément parent */
};
parent.onmouseover = function(event) {
/* event.target: child element (bubbled) */
/* event.target: élément enfant */
};
```

Expand Down Expand Up @@ -178,7 +178,7 @@ table.onmouseout = function(event) {
```

```online
Here they are in action. As the mouse travels across the elements of this table, the current one is highlighted:
Les voici en action. Lorsque la souris se déplace sur les éléments de ce tableau, celui qui est survolé est mis en évidence:

[codetabs height=480 src="mouseenter-mouseleave-delegation"]
```
Expand All @@ -196,9 +196,9 @@ Voici un exemple de code qui prend en compte toutes les situations possibles :

[js src="mouseenter-mouseleave-delegation-2/script.js"]

Once again, the important features are:
1. It uses event delegation to handle entering/leaving of any `<td>` inside the table. So it relies on `mouseover/out` instead of `mouseenter/leave` that don't bubble and hence allow no delegation.
2. Extra events, such as moving between descendants of `<td>` are filtered out, so that `onEnter/Leave` runs only if the pointer leaves or enters `<td>` as a whole.
Les caractéristiques importantes sont les suivantes:
1. On utilise la délégation d'événements pour gérer l'entrée/sortie de tout `<td>` à l'intérieur de la table. On s'appuie donc sur le `mouseover/out` au lieu du `mouseenter/leave` qui ne fait pas de bulles et ne permet donc aucune délégation..
2. Les événements supplémentaires, tels que le déplacement entre les descendants de `<td>` sont filtrés, de sorte que `onEnter/Leave` ne fonctionne que si le pointeur quitte ou entre dans `<td>` dans son ensemble.

```online
Voici l'exemple complet avec tous les détails:
Expand Down