jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

minor

Browse source
This commit is contained in:
Ilya Kantor 2019-05-29 21:38:58 +03:00
parent 16e7d07dc0
commit 0873473402
7 changed files with 27 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

7
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/1-behavior-nested-tooltip/solution.view/index.html
View file

@ -78,12 +78,13 @@
}
document.onmouseout = function() {
// it is possible that mouseout triggered, but we're still inside the element (cause of bubbling)
// it is possible that mouseout triggered, but we're still inside the element
// (its target was inside, and it bubbled)
// but in this case we'll have an immediate mouseover,
// so the tooltip will be destroyed and shown again
//
// that's an overhead, but here it's not visible
// can be fixed with additional checks
// luckily, the "blinking" won't be visible,
// as both events happen almost at the same time
if (tooltip) {
tooltip.remove();
tooltip = false;

2
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/index.html
View file

@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">

2
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/task.md
View file

@ -13,7 +13,7 @@ Technically, we can measure the mouse speed over the element, and if it's slow t
Make a universal object `new HoverIntent(options)` for it. With `options`:
- `elem` -- element to track.
- `over` -- a function to call if the mouse is slowly moving the element.
- `over` -- a function to call if the mouse is slowly moving over the element.
- `out` -- a function to call when the mouse leaves the element (if `over` was called).
An example of using such object for the tooltip:

6
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
View file

@ -10,15 +10,17 @@ The `mouseover` event occurs when a mouse pointer comes over an element, and `mo
These events are special, because they have a `relatedTarget`.
This property complements `target`. When a mouse leaves one element for another, one of them becomes `target`, and the other one `relatedTarget`.
For `mouseover`:
- `event.target` -- is the element where the mouse came over.
- `event.relatedTarget` -- is the element from which the mouse came.
- `event.relatedTarget` -- is the element from which the mouse came (`relatedTarget` -> `target`).
For `mouseout` the reverse:
- `event.target` -- is the element that mouse left.
- `event.relatedTarget` -- is the new under-the-pointer element (that mouse left for).
- `event.relatedTarget` -- is the new under-the-pointer element, that mouse left for (`target` -> `relatedTarget`).
```online
In the example below each face feature is an element. When you move the mouse, you can see mouse events in the text area.

2
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/mouseoverout-fast.view/index.html
View file

@ -1,5 +1,5 @@
<!doctype html>
<html lang="en">
<html>
<head>
<meta charset="UTF-8">