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

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

Форум программистов > JavaScript: для новичков > Клик вне DIV'a.

Автор: Elfet 12.12.2008, 00:08

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

Автор: Dagger 12.12.2008, 01:21

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

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

Автор: IDVsbruck 12.12.2008, 05:52

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

Автор: Elfet 12.12.2008, 15:26

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

Автор: Dagger 12.12.2008, 16:06

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

Код


$('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

Elfet, А чем плагины для jQuery не подошли? http://plugins.jquery.com/project/Plugins/category/44 их там 46 штук... smile

Автор: NNaarreekk 12.12.2008, 20:40

А не легче:

Код


<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

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

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

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

Автор: Dagger 14.12.2008, 18:30

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

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

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

Автор: ksnk 14.12.2008, 18:59

А вот как это пишется на 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;

Автор: Elfet 14.12.2008, 20:04

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