Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > JavaScript: Общие вопросы > Вопрос по событиям


Автор: fics 12.5.2010, 17:23
Добрый вечер, ситуация такая:

скажем есть 

Код



<div onmouseout="func1()" onmouseover="func1()">
  <img src="myimg.gif"/>
  <!--и еще целая куча объктов в этом div-->
</div>

как можно сделать, чтобы javascript при наведение на другие елементы, игнарировал их, думая что это див.
незнпю как лучше объянить.

Автор: нуп 12.5.2010, 17:31
Знаю на jquery это функция hover

Автор: miki54 12.5.2010, 22:02
Значит у вас есть div 

Цитата

Код

<div onmouseout="func1()" onmouseover="func1()">
  <img src="myimg.gif"/>
  <!--и еще целая куча объктов в этом div-->
</div>



И вы хотите, чтобы при наведении курсора на другие элементы, находящиеся вне вышеописанного дива, функция func1() не вызывалась. (чушь конечно)

Я вас правильно понял?

Автор: fics 12.5.2010, 22:35
Цитата(miki54 @  12.5.2010,  22:02 Найти цитируемый пост)
Значит у вас есть div 


меню это на дивах 

<div onmouseout="func1()" onmouseover="func2()">
func1() - плавно скрываеться
func2() - плавно появляется

если делать лишние навороты(втавлять картинки), то при на их наведении срабатывает для родительского дива onmouseout="func1()"  меню скроется,
а если для каждые дочерних елементов прописать onmouseout="func1()" onmouseover="func2()" - то меню дергается. 

Автор: miki54 12.5.2010, 22:55
Ну теперь все прояснилось.

Я думаю в этой ситуации лутше вставлять картинки как фоновые изображения дивов (правда не уверен что это решит проблему).

я еще подумаю и попозже отпишусь

Автор: fics 12.5.2010, 22:59
Цитата(нуп @  12.5.2010,  17:31 Найти цитируемый пост)
Знаю на jquery это функция hover


да все верно

Код

5. “hover” – этой функции следует передать в качестве параметра две функции обработчика. Одна из которых вызывается в случае если мышь наведена на целевой элемент. Вторая же вызывается, когда мышь с целевого элемента уходит. Эта функция не является простой калькой с привычных уже вам onmouseover и onmouseout т.к. более “интеллектуальна”, например, событие onmouseout часто генерируется в случаях, когда мышь уходит с самого элемента на другой элемент, но (и это важно) находящийся внутри целевого элемента. Например, если вы делаете выпадающее меню сайта, то поставив обработчик события onmouseover для пункта меню высшего уровня вам придется быть очень острожным чтобы не получить сообщение onmouseout когда пользователь водит мышь по подпунктам меню. Хотя это и не страшная проблема, но все же довольно неприятно. Например, попробуйте следующий код:


но пока jquery еще не использовал никогда, буду пробовать так

Автор: нуп 12.5.2010, 23:03
Держи пример! Все очень просто

Автор: fics 12.5.2010, 23:18
спасибо

Автор: fics 17.5.2010, 17:15
c jquery все хорошо работает.
Ну просто ради интереса, как можно реализовать в ручною такую фичу как HOVER в jqury?
если кто в курсе.

да и тянуть всю библиотеку ради одного вызова hover. не сильно охота.

 

Автор: Amphiluke 17.5.2010, 21:17
Если немного поковырять код jQuery, можно чего-нибудь нацарапать.
Код

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Hover example</title>
<link rel="stylesheet" type="text/css" href="hover.css">
<script type="text/javascript">
    function overout(evnt) {
        var e = (evnt) ? evnt : event;
        var p = (e.relatedTarget) ? e.relatedTarget : ((e.type == "mouseover") ? e.fromElement : e.toElement);
        while (p && p != this) try { p = p.parentNode; } catch(e) { p = this; }
        if (p == this) return;
        document.getElementById("console").innerHTML += (e.type == "mouseover") ? "mouse enter!!<br>" : "mouse leave!!<br>";
    }
    window.onload = function() {
        var outer2 = document.getElementById("outer2");
        outer2.onmouseover = overout;
        outer2.onmouseout = overout;
    }
</script>
</head>

<body>
    <div class="outer" id="outer2">
        Outer 2
        <div class="inner" id="inner2">Inner 2</div>
    </div>
    <div id="console"></div>
</body>
</html>

P.S. Взял шаблон документа у нупа.

Автор: fics 19.5.2010, 09:32
Извиняюсь, еще маленькое уточнение можно?
Данный мне пример разобрал

Код

function overout(evnt) {
        var e = (evnt) ? evnt : event;
        ******************


event - для IE, Opera
в FF что то не работает, там как я понял можно повесить только через присваемую функцию. как в примере выше

Вопрос: возможен вариант:
var  e = (evnt) ? evnt : event; - этот код нужно выполнить внутри класса
для IE, Opera это просто: var  e =  event; , а для FF как-то можно не через функцию?

Автор: Amphiluke 19.5.2010, 10:22
Ниче не понял. smile
У меня везде работает, и в IE, и в FF, и в Opera, и в Chrome...


Цитата(fics @  19.5.2010,  13:32 Найти цитируемый пост)
там как я понял можно повесить только через присваемую функцию

Обработчик нужно навешивать только через присваивание атрибуту onmouseover/onmouseout такой-то функции. Либо через методы addEventListener/attachEvent, но тогда для IE может потребоваться конструкция с замыканием.


Цитата(fics @  19.5.2010,  13:32 Найти цитируемый пост)
для IE, Opera это просто: var  e =  event; , а для FF как-то можно не через функцию?

Что вы имеете в виду? Для FF в обработчик обязательно должен попадать параметр (аргумент функции-обработчика), указывающий на экземпляр объекта Event. А иначе как? user posted image

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)