en.javascript.info/2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/2-hoverintent/source.view/hoverIntent.js
Prokhor eb74db5425
excess semicolon
excess semicolon after the 'destroy' method
2018-10-28 16:44:41 +03:00

50 lines
1.1 KiB
JavaScript

'use strict';
// Here's a brief sketch of the class
// with things that you'll need anyway
class HoverIntent {
constructor({
sensitivity = 0.1, // speed less than 0.1px/ms means "hovering over an element"
interval = 100, // measure mouse speed once per 100ms: calculate the distance between previous and next points
elem,
over,
out
}) {
this.sensitivity = sensitivity;
this.interval = interval;
this.elem = elem;
this.over = over;
this.out = out;
// make sure "this" is the object in event handlers.
this.onMouseMove = this.onMouseMove.bind(this);
this.onMouseOver = this.onMouseOver.bind(this);
this.onMouseOut = this.onMouseOut.bind(this);
// assign the handlers
elem.addEventListener("mouseover", this.onMouseOver);
elem.addEventListener("mouseout", this.onMouseOut);
// continue from this point
}
onMouseOver(event) {
/* ... */
}
onMouseOut(event) {
/* ... */
}
onMouseMove(event) {
/* ... */
}
destroy() {
/* your code to "disable" the functionality, remove all handlers */
}
}