VPF::Вопрос по событиям - Форум программистов

fics

Дата 12.5.2010, 17:23 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 218
Регистрация: 21.2.2008
Где: Луганск

Репутация: нет
Всего: нет

Добрый вечер, ситуация такая:

скажем есть

Код




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

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

Это сообщение отредактировал(а) fics - 12.5.2010, 17:24

--------------------

Ушел на пары

нуп

Дата 12.5.2010, 17:31 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 13
Всего: 33

Знаю на jquery это функция hover

miki54

Дата 12.5.2010, 22:02 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 25
Регистрация: 16.3.2009

Репутация: нет
Всего: нет

Значит у вас есть div

Цитата

Код


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

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

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

fics

Дата 12.5.2010, 22:35 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 218
Регистрация: 21.2.2008
Где: Луганск

Репутация: нет
Всего: нет

Цитата(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 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 25
Регистрация: 16.3.2009

Репутация: нет
Всего: нет

Ну теперь все прояснилось.

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

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

fics

Дата 12.5.2010, 22:59 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 218
Регистрация: 21.2.2008
Где: Луганск

Репутация: нет
Всего: нет

Цитата(нуп @ 12.5.2010, 17:31

)

Знаю на jquery это функция hover

да все верно

Код


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

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

--------------------

Ушел на пары

нуп

Дата 12.5.2010, 23:03 (ссылка)

(нет голосов)

Загрузка ...

Ботокодер

Профиль
Группа: Участник
Сообщений: 987
Регистрация: 22.6.2009
Где: Кременчуг

Репутация: 13
Всего: 33

Держи пример! Все очень просто

Присоединённый файл ( Кол-во скачиваний: 9 )

hover.rar 24,40 Kb

fics

Дата 12.5.2010, 23:18 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 218
Регистрация: 21.2.2008
Где: Луганск

Репутация: нет
Всего: нет

спасибо

--------------------

Ушел на пары

fics

Дата 17.5.2010, 17:15 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 218
Регистрация: 21.2.2008
Где: Луганск

Репутация: нет
Всего: нет

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

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

--------------------

Ушел на пары

Amphiluke

Дата 17.5.2010, 21:17 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

Если немного поковырять код 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 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 218
Регистрация: 21.2.2008
Где: Луганск

Репутация: нет
Всего: нет

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

Код


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 (ссылка)

(нет голосов)

Загрузка ...

☽

Профиль
Группа: Завсегдатай
Сообщений: 1253
Регистрация: 26.8.2009

Репутация: 35
Всего: 112

Ниче не понял. 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

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: Общие вопросы \| Следующая тема »