Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > отключения реакции элемента на события


Автор: DigitalBrain 24.4.2010, 20:45
Здравствуйте господа! 
Попробую задать вопрос на этом форуме( т.к на другом решить проблему не смогли а это выглядит куда солидней гг)
есть кнопка созданная с JS с графикой с помощью background-image оформленная как класс. Она является элементом table с 4 мя колонками-левый край кнопки-ячейка с иконкой кнопки(элемент image) , ячейка с span для надписи к кнопке ну и ячейка-правый край кнопки. 
Ячейки полностью занимают всю площадь  table(нет внутренних отступов) а теперь к сути проблемы :

Нужно задать реакцию кнопки на событие onmouseover / onmouseout. Казалось бы все просто , но если обработчик поставить на хендл непосредственно элемента table- то при перемещение указателя мышки уже внутри кнопки(таблицы) по разным дочерним ее элементам(например span, image) для них генерируются тоже такие же события - их соответственно получает обработчик onmouseover table , так как событие всплывает вверх по иерархии элементов.
 Т.е генерируются ложные события для таблицы во время перемещения указателя по ее дочерних элементах - так как указатель уже внутри table и никаких событий не должно ему поступать. Фильтр по event.target нечего не даст если сравнивать ее с хенделом table - так как сам table не выступает за свои ячейки - т.е он всегда под ними. Выхода я не как не найду. Думаю Кто то уже должен был решать ету проблемы. Помогите свежими идеями очень прошу=)

Автор: Amphiluke 24.4.2010, 22:27
Хм. Надеюсь, понял проблему правильно. Вот примерчик.
Код

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
    function foo(evnt) {
        var tb = document.getElementById("tb");
        var e = (evnt) ? evnt : event;
        if (e.type == "mouseover") {
            tb.onmouseover = null;
            tb.style.background = "#" + Math.round(0x100000 + Math.random() * (0xFFFFFF - 0x100000)).toString(16);
        } else {
            var relTarget = (e.relatedTarget) ? e.relatedTarget : e.toElement;
            while (relTarget) {
                if (relTarget == tb) break;
                relTarget = relTarget.parentNode;
            }
            if (relTarget != tb) {
                tb.onmouseover = foo;
                tb.style.background = "none";
            }
        }
    }
</script>
</head>

<body>
    <table id="tb" border="0" width="300" cellpadding="0" cellspacing="0" onmouseover="foo(event);" onmouseout="foo(event);">
        <tr>
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
        </tr>
    </table>
</body>
</html>

Получился довольно-таки монстр, но работает. smile 
Суть в том, чтобы при возникновении события onmouseover обнулить его обработчик, а при возникновении события onmouseout — восстановить при условии, что курсор вышел за пределы таблицы.

Добавлено через 3 минуты и 48 секунд
Random-ный цвет таблицы сделал, чтобы убедиться, что при ерзании мышкой по дочерним элементам таблицы не происходит ложных срабатываний обработчика события onmouseover.

Автор: Amphiluke 24.4.2010, 22:59
P.S. Поскольку у вас много кнопок, то вместо того, чтобы задавать каждой свой id, можно воспользоваться свойством currentTarget. Я имею в виду, что вместо этого:

Цитата(Amphiluke @  25.4.2010,  02:27 Найти цитируемый пост)
Код

var tb = document.getElementById("tb");
var e = (evnt) ? evnt : event;

можно написать так:
Код

var e = (evnt) ? evnt : event;
var tb = e.currentTarget;

Автор: DigitalBrain 24.4.2010, 23:03
Спасибо огромное!
 Неожидал такой оперативности в помощи. Действительно помог такой алгоритм) Признаюсь даже не знал про свойство relatedTarget / toElement =) точнее когда то встречал их , но не обращал внимания) а зря... 3 дня мук кончились гг smile  smile  smile

Добавлено через 7 минут и 35 секунд
Цитата

P.S. Поскольку у вас много кнопок, то вместо того, чтобы задавать каждой свой id, можно воспользоваться свойством currentTarget

Да можно, может даже и лучший вариант.
Хотя это не помеха так как кнопки-- экземпляр класса и все элементы там созданы с JS   --  document.createElement('table'); вегда есть хенл на него , нет необходимости давать каждому свой ID ,а значит и получать по нем хендл ненужно....

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)