Mouseover Event with Timeout
I have some links with mouseover events. And onmouseover will display a Layer. It works fine but its bit annoying, because if the mouse unintensionally goes over the link the layer will be display.
Now what 开发者_如何学运维I want is, if the user has mouseover the link and stay 200 miliseconds on the link then it should show the layer.
How can I do it in a better way. As I need to register and setTimeout function and If the mouse leaves before 200 MS I have to clear Timeout.
Thanks for the help.
<!doctype html>
<html>
<head>
<script>
window.onload = function () {
var interval = null, link = null;
// Window = Container
window.onmousemove = function (event) {
var target = event.target;
if (target.nodeName === "A") {
link = target;
if (interval === null) {
interval = setInterval (function () {
clearInterval (interval);
interval = null;
open ("", ""); // Display layer
}, 1000); // I think 1 sec is better
}
}
if (interval !== null && link !== target) {
clearInterval (interval);
interval = null;
}
}
}
</script>
<title></title>
</head>
<body>
<a href = "#">Click me</a>
<a href = "#">Click me</a>
</body>
</html>
I've written JS code to do just that at a couple different companies. It gets complicated if you also want to dismiss the layer on mouse out of whatever your triggering affordance is, and have that dismissal be delayed as well.
You're right you need timers with their timerID's stored such that you can clear them. I'm not going to write the code for you but if I can critique your implementation once you have one.
加载中,请稍侯......
精彩评论