Модераторы: Sardar, Aliance
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> отключения реакции элемента на события, блокировка реакции дочерних элементов 
V
    Опции темы
DigitalBrain
  Дата 24.4.2010, 20:45 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 2
Регистрация: 24.4.2010

Репутация: нет
Всего: нет



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

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

Присоединённый файл ( Кол-во скачиваний: 7 )
Присоединённый файл  project.jpg 29,39 Kb
PM MAIL   Вверх
Amphiluke
Дата 24.4.2010, 22:27 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112



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

<!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.
PM   Вверх
Amphiluke
Дата 24.4.2010, 22:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


   ☽
***


Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112



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;



Это сообщение отредактировал(а) Amphiluke - 24.4.2010, 23:00
PM   Вверх
DigitalBrain
  Дата 24.4.2010, 23:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 2
Регистрация: 24.4.2010

Репутация: нет
Всего: нет



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

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

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

Да можно, может даже и лучший вариант.
Хотя это не помеха так как кнопки-- экземпляр класса и все элементы там созданы с JS   --  document.createElement('table'); вегда есть хенл на него , нет необходимости давать каждому свой ID ,а значит и получать по нем хендл ненужно....
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0412 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.