VPF::Клик вне DIV'a. - Форум программистов

Elfet

Дата 12.12.2008, 00:08 (ссылка)

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

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

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

Всем привет!
Делаю выпадающие менюшки. Хочу сделать что бы они исчезали когда кликают вне их дива. Как это отловить?
Заранее спасибо!

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

PHP Чат Скрипт

Dagger

Дата 12.12.2008, 01:21 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Экс. модератор
Сообщений: 377
Регистрация: 4.9.2002
Где: Киев

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

Когда происходит событие "onmouseover" над менюшкой тебе следует прицепить к телу документа (тэг body) ивент "click". Следующий шаг – проверка координат мышки. Если координаты в пределах твоего выпадающего меню - игнорируешь, иначе – закрываешь.

Решение, на мой взгляд, довольно грубое, но работает отлично.
Особенно, если ты используешь фреймворк (jQuery или чето типа этого)

IDVsbruck

Дата 12.12.2008, 05:52 (ссылка)

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

Загрузка ...

Опытный

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

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

Да, грубовато ... Начало правильное: назначаем body событие onclick, где можем получить объект, который вызвал это событие (для ИЕ это window.event.srcElement). Соответственно, проверяем его на соответствие диву меню и делаем нужные действия. Пару "моментов":
- для разных браузеров есть универсальное средство получение эвента;
- для разных браузеров инвокер называется по-разному (для ФФ это event.target), но есть универсальное получение таргета;
- когда менюшка закрывается, событие убираем.

Elfet

Дата 12.12.2008, 15:26 (ссылка)

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

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

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

Да, я использую jQuery. Есть для него реализации? Как не нём это сделать? Или же придётся всё на "JavaScript-е" делать? smile

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

PHP Чат Скрипт

Dagger

Дата 12.12.2008, 16:06 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Экс. модератор
Сообщений: 377
Регистрация: 4.9.2002
Где: Киев

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

Простейший способ:

Код


$('body').click(function(e){
    var offset = $('#mymenu').offset();
    var width = $('#mymenu').width();
    var height = $('#mymenu').height();
    
    if(e.pageX > offset.left &&
       e.pageY > offset.top &&
       e.pageX < offset.left + width &&
       e.pageY < offset.top + height)return false;
        return true;

});

ksnk

Дата 12.12.2008, 16:32 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

Elfet, А чем плагины для jQuery не подошли? Про меню их там 46 штук... smile

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

NNaarreekk

Дата 12.12.2008, 20:40 (ссылка)

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

Загрузка ...

Опытный

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

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

А не легче:

Код


<div id='nashDiv' onmouseover="this.focus(); xxx()" >sadsad</div>

Код


function xxx(){
document.getElementById('nashDiv').onblur=function(){
this.style.display='none';
}
}

?

Поленился проверить код, так что если не работает не ругать! smile

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

Забронировать отель в Ереване
Рестораны Еревана

Elfet

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

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

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

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

Dagger, Так и реализуют это? Какие ещё подводные камни могут быть?

ksnk, нету там подходящих мне. Я так и не научился там плагины искать smile

NNaarreekk, это другое. Мне не потеря фокуса нужна, а клик вне дива.

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

PHP Чат Скрипт

Dagger

Дата 14.12.2008, 18:30 (ссылка)

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

Загрузка ...

Опытный

Профиль
Группа: Экс. модератор
Сообщений: 377
Регистрация: 4.9.2002
Где: Киев

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

у меня была схожая задачка и я ее решил простейшим для меня способом (как в моем примере) , но моя задачка – всего лишь частный случай твоей.
Тебе надо определенно ее сделать поабстрактней smile

Советую обратить внимание на пост IDVsbruck, я не проверил и ничего не могу сказать по существу, но в идеале это самое рациональное решение.

Добавлено через 2 минуты и 23 секунды
По поводу подводных камней – не забывай делать unbind клика после исчезновения меню. Баги с биндами ивентов трудно заметить.

ksnk

Дата 14.12.2008, 18:59 (ссылка)

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

Загрузка ...

прохожий

Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

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

А вот как это пишется на jQuery. Кусочки кода натырены из плагина datePicker

Показываем меню и ставим:

Код


$(document).bind('mousedown', this._checkMouse);

Закрываем меню функцией _closeCalendar, в ней делаем

Код


$(document).unbind('mousedown', this._checkMouse);

Ну, а _checkMouse определяется в функции инициализации объекта datePicker и выглядит примено так

Код


..
  var c = this;
  var _checkMouse = function(e)
  {
     var el = e.target;
     var cal = $('#dp-popup')[0];
     while (true){
       if (el == cal) {
          return true;
       } else if (el == document) {
          c._closeCalendar();
          return false;
       } else {
          el = $(el).parent()[0];
       }
     }
  };
  this._checkMouse = _checkMouse;

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

Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image

Elfet

Дата 14.12.2008, 20:04 (ссылка)

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

Загрузка ...

Белый и Пушистый

Профиль
Группа: Awaiting Authorisation
Сообщений: 3776
Регистрация: 2.4.2003

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

Ок, спасибо. smile

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

PHP Чат Скрипт

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