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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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