Created
May 27, 2016 04:18
-
-
Save shvets-sergey/9fd6147991c24955fd4221d54ab5601c to your computer and use it in GitHub Desktop.
Global mouse hover for any element in filter
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="UTF-8"> | |
<title>Hover event test</title> | |
</head> | |
<body> | |
<div style="min-height: 500px; width: 100%" class="root"> | |
This is the root | |
<div class="child"> This one is a child div that contains some <i>interesting</i> elements... <b>VERY</b> | |
<span>interesting</span> <a class="link1" href="index.html">elements</a> </div> | |
<div> Second <a class="link2">child</a> </div> | |
</div> | |
<script type="text/javascript"> | |
var mouseTracker = function() { | |
var that = {}, | |
sensitivity = 60; // how soon to trigger event if mouse is not moving (in ms) | |
var event, endMoveTimer, _allowedTags, mouseMoveEndHandler; | |
document.addEventListener("mousemove", function (event) { | |
updateMouseCoordinates(event); | |
}); | |
var mouseMoveEnd = function () { | |
console.log("Finish Moving"); | |
if (mouseMoveEndHandler) { | |
if (_allowedTags.indexOf(event.target.tagName.toLowerCase()) != -1) { | |
mouseMoveEndHandler(event); | |
} | |
} | |
}; | |
var updateMouseCoordinates = function(mouseMoveEvent) { | |
event = mouseMoveEvent; | |
if (endMoveTimer) clearTimeout(endMoveTimer); | |
endMoveTimer = setTimeout(mouseMoveEnd, sensitivity); | |
}; | |
that.setMouseMoveEndHandler = function(allowedTags, handler) { | |
_allowedTags = allowedTags; | |
mouseMoveEndHandler = handler; | |
}; | |
return that; | |
}; | |
var tracker = mouseTracker(); | |
tracker.setMouseMoveEndHandler(["a", "span"], function (event) { | |
console.log("Stopped on the element below:"); | |
console.log(event); | |
}) | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment