Событие при наведении мыши с тайм-аутом - PullRequest
Новая
       6

Событие при наведении мыши с тайм-аутом

0 голосов
/ 10 февраля 2011

У меня есть несколько ссылок с событиями наведения мыши. И onmouseover будет отображать слой. Он работает нормально, но немного раздражает, потому что, если мышь невольно переходит по ссылке, слой будет отображаться.

Теперь я хочу, чтобы пользователь щелкнул мышью по ссылке и оставил ссылку на 200 миллисекунд, тогда он должен показать слой.

Как я могу сделать это лучше? Поскольку мне нужно зарегистрировать и установить функцию TimeTimeout, и если мышь уходит до 200 мс, я должен очистить Timeout.

Спасибо за помощь.

Ответы [ 2 ]

0 голосов
/ 11 февраля 2011

Я написал код JS, чтобы сделать это в паре разных компаний. Это усложняется, если вы также хотите удалить слой с мышью вне зависимости от того, сколько у вас есть средств для запуска, и нужно также отложить это удаление.

Вы правы, вам нужны таймеры с их таймером, чтобы вы могли их очистить. Я не собираюсь писать код для вас, но если я смогу критиковать вашу реализацию, когда она у вас есть.

0 голосов
/ 11 февраля 2011

enter image description here

<!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>
...