0

Здравствуйте.

upd: Решение проблемы найдено. Решение в ответах.

Сначала немного кода, потом проблема:

HTML:

<div style="background:#ccc" onmouseover="over()">
<a href="#">link</a>
<a href="#">another link</a>
</div>

JavaScript:

function over() {
    alert('over');
}

Проблема в том, что событие onmouseover повторно срабатывает при наведении на любую из ссылок, даже если указатель мыши и до этого находился в границах div-a.

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

Та же проблема наблюдается с onmouseout, но мне мнится, что решения у них должны быть аналогичными.

Кусок контекста для понимания проблемы:

Есть каскадное меню.

Подменюшки выплывают с помощью JS ибо клиента не устраивает их мгновенное появление при реализации через CSS.

Проблема в том, что процесс отрисовки подменю повторяется при наведении на его пункты.

4
  • только в тот момент, когда пользователь наводит мышь на div. Ну и вешайте событие на div, сами же в вопросе дали ответ
    – user3545
    12 мар 2012 в 10:15
  • событие и висит на div-e, но повторно срабатывает при наведении на ссылки в этом div-e содержащиеся. С JS работаю не слишком плотно, по этому вероятно чего-то недопонимаю. Если так - поправьте меня пожалуйста.
    – ikoolik
    12 мар 2012 в 10:22
  • Не вчитывался в вопрос когда писал комментарий. В вашем случае нужно вешать обработчики непосредственно на ссылки, а не на div. Причина тому проста - div содержит в себе эти самые ссылки, соответственно наведение на любой дочерний элемент div'a порождает событие MouseOver для него самого.
    – user3545
    12 мар 2012 в 10:51
  • @AlexWindHope В том то и проблема: Мне нужно событие на диве, а не на ссылках =( т.е. события на ссылках меня не спасут. Обработчик в процессе написания. Просто думал существует готовое решение.
    – ikoolik
    12 мар 2012 в 11:14

4 ответа 4

2
<div style="background:#ccc" onmouseover="over(event)">
<a href="#">link</a>
<a href="#">another link</a>
</div>
<script>
function over(e){
    e = e ? e : window.event;
    e.target = e.target ? e.target : e.srcElement;

    if(e.target.nodeName.toLowerCase() != 'div') return false;
    console.log(e.target.nodeName.toLowerCase());
}
</script>

Проверка элемента довольно грубая. Хотя и привязка события такая же.

1
  • @ling спасибо. уже самостоятельно написал необходимый обработчик. все работает
    – ikoolik
    12 мар 2012 в 11:24
1

схематичное решение на случай если у кого-то будет подобный вопрос:

HTML:

<div style="background:#ccc" id="targeted_div">
<a href="#">link</a>
<a href="#">another link</a>
</div>

JavaScript:

window.onload = function() {
    var parent = document.getElementById('targeted_div');
    parent.onmouseover = parent.onmouseout = function(e) {
        e = e || event;
        if (!isOutside(e, this)) return;
        if(e.type == 'mouseout') {
            //действия при выходе
        } else {
            //действия при входе
        }
    }
}

модифицировал код взятый отсюда

0

Очень вам рекомендую использовать для подобных проб, как у вас, выражение

console.log('сообщение в консоль');

Это уберет проблему лишнего нажатия на кнопку "ОК" алерта. Тем более, что может быть случай, когда что-то зациклится, и вы от алерта не избавитесь (только перегрузив страницу). Думаю, вы умеете пользоваться JS-консолью в браузере.
По поводу вашей проблемы. После того, как вы замените alert() на console.log('сообщение в консоль');, проблема должна исчезнуть. Все дело, скорее, в том, что после активирования алерта и его деактивации, мышь как-бы снова попадает в поле зрения вашего дива. Вот оттуда и повторное срабатывание события.

3
  • console.log() - рулит, это да. только вот проблема несколько другая как мне показалось. Хотя формулировка вопроса не дает мне 100% уверенности.
    – user3545
    12 мар 2012 в 10:57
  • А, нет, вы правы, событие навешивается еще на каждый внутренний элемент. 12 мар 2012 в 11:05
  • @Антон Мухин alert написан исключительно как пример действия функции. код приведенный в вопросе - это просто схема, которую с кодом реальным роднит лишь общая проблема.
    – ikoolik
    12 мар 2012 в 11:12
0

Попробуйте решить это дело, установив свойства position у ссылок в relative. Есть еще один способ - удалять "прослушиватель" событий. Для этого используйте метод

RemoveEventListener()

2
  • @Asen Это и породило мой вопрос.
    – ikoolik
    12 мар 2012 в 11:17
  • @Asen Уже пробовал удалять события, но так как в конкретной задаче они парные (onmouseover/onmouseout), при отмене обработчика одного события автоматом создавался обработчик события обратного. Как следствие - тот же бардак Я не указал это в вопросе в чем виноват. btw задача решена
    – ikoolik
    12 мар 2012 в 11:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.