- Поисковые системы
- Практика оптимизации
- Трафик для сайтов
- Монетизация сайтов
- Сайтостроение
- Социальный Маркетинг
- Общение профессионалов
- Биржа и продажа
- Финансовые объявления
- Работа на постоянной основе
- Сайты - покупка, продажа
- Соцсети: страницы, группы, приложения
- Сайты без доменов
- Трафик, тизерная и баннерная реклама
- Продажа, оценка, регистрация доменов
- Ссылки - обмен, покупка, продажа
- Программы и скрипты
- Размещение статей
- Инфопродукты
- Прочие цифровые товары
- Работа и услуги для вебмастера
- Оптимизация, продвижение и аудит
- Ведение рекламных кампаний
- Услуги в области SMM
- Программирование
- Администрирование серверов и сайтов
- Прокси, ВПН, анонимайзеры, IP
- Платное обучение, вебинары
- Регистрация в каталогах
- Копирайтинг, переводы
- Дизайн
- Usability: консультации и аудит
- Изготовление сайтов
- Наполнение сайтов
- Прочие услуги
- Не про работу
Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий
Здравствуйте. Надеюсь на вашу помощь.
Есть HTML код:
Как видите, у каждого div'a прописано событие при наведении мыши, которое делает фон красным, однако если навести мышь на див с id равным fourth в красный окрашивается не только он, а ещё дивы находящиеся по ним, т.е. second и first. Как с этим справиться, как сделать так что выделялся только тот див на который наведена мышь, т.е. самый верхний?
Заранее спасибо.
Как самый простор вариант, вместо this.style.background='#ff0000', вставь яваскрипт функцию, в которой пропиши каким цветом какие дивы делать при наведении.
например при наведении на first
Чтобы мышу добраться до дива fourth, ему надо проехать через first и second, в итоге у вас последовательно обрабатывается три события. Как вариант, на каждом onmouseover надо перекрашивать все дивы в исходный цвет, а текущий в красный.
mouseover - не совсем правильный способ ловить события.
Стоит почитать https://developer.mozilla.org/en/DOM/element.addEventListener - есть возможность прекратить обработку событий по какому-то условию, в частности первый обработчик сообщит что дальше обрабатывать не надо.
Описанный вами процесс называется event bubbling или по русски называют"всплывание событий".
например по запросу: http://www.google.ru/search?hl=ru&rlz=1C1CHMQ_ruRU307RU308&newwindow=1&q=javascript+всплывание+событий&btnG=Поиск&lr=&aq=f&oq= есть кроссбраузерные методы.
Кроме того почти во всех javascript фреймворках есть встроенные функции остановки всплывания.
ТС, что бы сделать нормально то что вам надо, надо что бы у ваших дивов было что то общее. Или родитель один, или класс, или ещё что то..
Всё остальное, типа через ID, как выше предлагали, от лукавого.
Набросал пару вариантов, ещё когда только тема появилась, но потёр. Так как ленив по сути, не хотелось бесконечных уточнений что именно нужно.
Как видите, у каждого div'a прописано событие при наведении мыши, которое делает фон красным, однако если навести мышь на див с id равным fourth в красный окрашивается не только он, а ещё дивы находящиеся по ним, т.е. second и first.
можно конечно заниматься обработкой всплывающих событий, но на мой взгляд здесь это лишние т.к. изначально есть ошибка в понимании верстки, а именно блоки second и first находятся не под блоком fourth, а внутри него!
соответственно измените версту и не будет проблем :)
ага, а вообще для этого есть псевдокласс :hover который работает корректно, с пузырьком но без capture, и вообще удобнее в сто раз.
Всем спасибо, решение нашёл уже.
Достаточно при наведении на fourth отключить событие:
event = event || window.event
if (event.stopPropagation) {
// Вариант стандарта W3C:
event.stopPropagation()
} else {
// Internet Explorer:
event.cancelBubble = true
}
}
Тут писали про то, что сменить верстку. Задача как раз в том, что верстку не поменять.