Создайте прокладку, перекрывающую всю страницу, но разрешающую события наведения мыши в фоновом режиме - PullRequest
Новая
       11

Создайте прокладку, перекрывающую всю страницу, но разрешающую события наведения мыши в фоновом режиме

0 голосов
/ 13 июля 2010

Мне нужно создать подкладку для всей страницы для захвата событий щелчка, но подкладка не должна останавливать другие события, такие как наведение мыши и т. Д., На другие элементы HTML на странице.

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

Проблема onclick возникает только в IE.

В FF и Chrome есть проблема с событиями при наведении курсора, которые не запускаются в фоновом режиме, поэтому я, конечно, был бы признателен за любые советы по решению этой проблемы ...

Вот очень простой пример, демонстрирующий проблему.

Есть идеи? : -) 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <style type="text/css">
        body
        {
            font-size:20px;
            height:100%;
        }
        #shim
        {
            position: absolute;
            padding: 0;
            margin: 0;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            zindex: 1;
        }
        #trace
        {
            border: 1px solid #ccc;
            height: 100px;
        }
    </style>

    <script type="text/javascript">
        function trace(e) {
            e = e || event;
            document.getElementById('trace').innerHTML = "Hovered innerHTML: " + (e.target || e.srcElement).innerHTML;
        }
    </script>

</head>
<body>
    <div id="shim" onclick="alert('shim clicked')">
    </div>
    <table border="1" onmouseover="trace(event)">
        <tr>
            <td>
                AAAAAA AAAAAA
            </td>
            <td>
                BBBBBB BBBBB
            </td>
            <td>
                CCCCCCCC CCCCC
            </td>
            <td>
                DDDDDD DDDDDDDDDD
            </td>
            <td>
                EEEEEE EEEE
            </td>
            <td>
                FFFFFF FFFFF
            </td>
            <td>
                GGGG GGGGGGGG
            </td>
            <td>
                EEEE EEEE
            </td>
            <td>
                FFFF FFFFFF
            </td>
        </tr>
    </table>
    <div id="trace">
    </div>
</body>
</html>

1 Ответ

0 голосов
/ 13 июля 2010

Я не знаю, возможно ли исправить вашу проблему, но я сделал что-то вроде несколько недель назад, что работает для меня.

По сути, я создаю глобальный обработчик событий, регистрируя все события, которые янужно в элементе документа, а затем, используя event.srcElement или event.element, я смог получить элемент, который запускает событие в первую очередь.На основании события и элемента я могу решить, что делать.

...