Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > onmouseover

Автор: iff 7.3.2012, 14:33

Как сделать так, что-бы он не вызывался при наведении на дочернии элементы?

Автор: 502 7.3.2012, 14:50

Цитата(iff @ 7.3.2012, 14:33

)

Как сделать так, что-бы он не вызывался при наведении на дочернии элементы?

может родительские?

Автор: iff 7.3.2012, 15:07

http://www.quizful.net/post/javascript_mouse_events

Цитата

Давайте рассмотрим небольшой пример. Попробуйте поводить курсор мышки поверх элементов с разным фоном. Элемент 1 должен слегка мигать при наведении на него курсором - это срабатывает событие mouseover.
Тем не менее, как Вы видите, это событие срабатывает и при наведении курcора мыши на элемент№2 и даже span.

Этого должно не порисходить.

Автор: 502 7.3.2012, 15:16

Цитата(iff @ 7.3.2012, 15:07

)

Этого должно не порисходить.

почему это?

Добавлено через 3 минуты и 25 секунд
хотя, да, согласен

Автор: Evghenusi 7.3.2012, 18:45

Цитата(iff @ 7.3.2012, 14:33

)

Как сделать так, что-бы он не вызывался при наведении на дочернии элементы?

если родительский элемент заранее известен, то к примеру проверяя имя класса, тега ну или айди к примеру.

Автор: iff 7.3.2012, 19:11

Цитата(Evghenusi @ 7.3.2012, 18:45

)

если родительский элемент заранее известен

Конечно известен (напрмер div), к ниму прикреплено onmouseover. У него есть дочернии например 2 картинки. Так вот при переходи указателя мыши с одной картинки на другую происходит onmouseover, а я хочу что-бы оно происходило только при наведении непосредственно на этот див, а при наведении на его дочернии элементы - нет.

Автор: Evghenusi 7.3.2012, 19:53

iff, и что тебя смущает?
почему не проверять имя тега?

Код


e = e || window.event;
t = e.target || e.srcElement;
if(t.tagName == 'DIV')
{
    /*....*/
}
//даже else не нужен

Автор: Amphiluke 7.3.2012, 20:00

iff, ну так ведь вы сами привели ссылку с ответом на свой вопрос.

Цитата(iff @ 7.3.2012, 19:07

)

http://www.quizful.net/post/javascript_mouse_events

Получаете при помощи relatedTarget/fromElement объект, с которого переместилась мышь. Если объект содержится внутри целевого элемента (проверяется перебором цепи родительских объектов), то значит, указатель движется в пределах этого вашего целевого контейнера, а не переместился на него извне.

Автор: Evghenusi 7.3.2012, 20:09

Цитата(Amphiluke @ 7.3.2012, 20:00

)

relatedTarget/fromElement

перед тем как оставил сообщение, тоже читал, но мне кажентся "перебор цепи родительских объектов" будет излишен, либо я что-то упускаю smile

Автор: Amphiluke 7.3.2012, 20:14

Это наиболее универсальный способ (есля я тоже ничего не упускаю). Простая проверка на имя тега работает ровно до тех пор пока не появится дочерний div. Привязка по id элемента, получаемого через target/srcElement возможна не всегда (например, нет доступа к HTML-разметке)

Автор: Evghenusi 7.3.2012, 20:20

Цитата(Amphiluke @ 7.3.2012, 20:14

)

пока не появится дочерний div

я ранее сказал, что можно и по имени класса...хотя ладно, упираться рогами не буду smile

.

Amphiluke, пардоньте за глупый вопрос, а как перебирать? smile

, если не затруднит

Автор: Amphiluke 7.3.2012, 20:33

Ну, к примеру так:

Код


function mouseoverHandler(e) {
    var relEl = e.relatedTarget || e.fromElement;
    while (relEl) {
        if (relEl === this) return;
        relEl = relEl.parentNode;
    }
    document.body.appendChild(document.createTextNode("mouseover!"));
}
window.onload = function() {
    var div = document.getElementById("outer");
    if (div.addEventListener) {
        div.addEventListener("mouseover", mouseoverHandler, false);
    } else {
        div.attachEvent("onmouseover", function() { mouseoverHandler.call(div, event); });
    }
}

Код


<div id="outer" style="padding:30px; background:green; width:300px;">
    <div style="width:40%; background:red;">
        <div style="position:relative; left: 110%; padding:30px; background:yellow;">o</div>
    </div>
</div>

Кстати, этот пример демонстрирует, почему необходимо именно перебирать родительские элементы в цикле, а не просто проверять parentNode

Автор: iff 8.3.2012, 15:21

спасибо