shvets-sergey/index.html

## index.html
<!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>
	<!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>