нажав на привязку div fires для $ ('body').

Question

У меня есть div, я хочу установить его так, чтобы при нажатии на что-то другое, он скрывал div.

Так я и сделал

$('body').click(function(){
    if(loginOpened)
    {
        $('#loginWindow').animate({
            'width':'0px',
            'height':'0px'
        },"fast");
    }
    loginOpened=false;
});

Однако, даже когда я нажимаю в самом div, событие запускается, есть ли способ предотвратить это?

Answer 1

Вы можете остановить это, используя

e.stopPropagation(); при наличии события щелчка, связанного с тегом <div />.

См. event.stopPropagation ()

Предотвращает всплеск события дерево DOM, предотвращающее любого родителя обработчики от уведомления о событие.

В противном случае вы можете проверить цель события внутри щелчка тела. Проверьте, совпадает ли event.target с вашим div.

См. event.target

Answer 2

Просто проверьте event.target. Если элемент, вызвавший событие, является вашим div, не выполняйте код.

$('body').click(function(evt){
    evt = evt || window.event
    if ($(evt.target) != $('#loginWindow')) {
      if(loginOpened)
      {
          $('#loginWindow').animate({
              'width':'0px',
              'height':'0px'
          },"fast");
      }
      loginOpened=false;
    }
});

Answer 3

Да, но, конечно, Microsoft и остальной мир пришли к разным выводам о том, как это сделать. Этот сайт дает четкое краткое изложение того, что необходимо: http://www.quirksmode.org/js/events_order.html.

Я не использую jQuery, но способ jQuery выглядит как event.stopImmediatePropagation();, как видно из этого вопроса: Обработчики множественных событий jQuery - как отменить? .

Answer 4

Пара изменений из кода Джона:

$('body').click(function(ev){
    // jQuery means never having to say "window.event"!
    // Also, code's cleaner and faster if you don't branch, 
    // and choose simple breaks over more complex ones
    if(!loginOpened) return;
    // Lastly, compare using the DOM element; 
    // jQuery objects never compare as the "same"*
    if (ev.target == $('#loginWindow').get(0)) return;  
    $('#loginWindow').animate({
        'width':'0px',
        'height':'0px'
    },"fast");
    loginOpened=false;
});

Если перехват этого события в теле не работает, вы можете просто добавить простой обработчик события в div:

$('#loginWindow').click(function (ev) { ev.stopPropagation(); });

Я собирался сказать, верни ложь, но это помешало бы другим вещам выстрелить из div. stopPropagation просто предотвращает всплеск события наружу.

Я могу быть очень разборчивым, конечно ...

//Delegation via the document element permits you to bind the event before
// the DOM is complete; no flashes of unbehaviored content
$(document).delegate('body', 'click', function(ev){
    //You only have one instance of an id per page, right?
    if(!loginOpened || ev.target.id == 'loginWindow') return;
    //quotes and px?  not necessary.  This isn't json, and jQ's smart
    $('#loginWindow').animate({width:0,height:0},"fast");
    loginOpened=false;
});

* Не верите мне? Попробуйте:

jQuery('#notify-container') == jQuery('#notify-container') 

Тогда попробуйте

jQuery('#notify-container').get(0) == jQuery('#notify-container').get(0)