Событие триггера jQuery при нажатии вне элемента

Ответ 1

Просто введите menuWraper элемент menuWraper event.stopPropagation(), чтобы его событие щелчка не начиналось с document.

Попробуйте: http://jsfiddle.net/Py7Mu/

$(document).click(function() {
    alert('clicked outside');
});

$(".menuWraper").click(function(event) {
    alert('clicked inside');
    event.stopPropagation();
});

• http://api.jquery.com/event.stopPropagation/

В качестве альтернативы вы можете return false; вместо использования event.stopPropagation();

Ответ 2

если у вас есть дочерние элементы, например выпадающие меню

$('html').click(function(e) {
  //if clicked element is not your element and parents aren't your div
  if (e.target.id != 'your-div-id' && $(e.target).parents('#your-div-id').length == 0) {
    //do stuff
  }
});

Ответ 3

Наиболее распространенное приложение здесь закрывается при нажатии на документ, но не тогда, когда оно исходит из этого элемента, для этого вы хотите остановить пузырь, например:

$(".menuWrapper").click(function(e) {
  e.stopPropagation(); //stops click event from reaching document
});
$(document).click(function() {
  $(".menuWrapper").hide(); //click came from somewhere else
});

Все, что делалось здесь, - это предотвращение нажатия барьера вверх (через event.stopPrpagation()), когда он появился в элементе .menuWrapper. Если этого не произошло, щелчок пришел откуда-то еще, и по умолчанию будет доходить до document, если он туда попадет, мы скроем те элементы .menuWrapper.

Ответ 4

попробуйте эти.

$(document).click(function(evt) {
    var target = evt.target.className;
    var inside = $(".menuWraper");
    //alert($(target).html());
    if ($.trim(target) != '') {
        if ($("." + target) != inside) {
            alert("bleep");
        }
    }
});

Ответ 5

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

stopPropagation вызвал проблемы в моем случае, потому что мне понадобилось событие click для чего-то другого. Более того, не каждый элемент должен приводить к закрытию div при нажатии.

Мое решение:

$(document).click(function(e) {
    if (($(e.target).closest("#mydiv").attr("id") != "mydiv") &&
        $(e.target).closest("#div-exception").attr("id") != "div-exception") {
        alert("Clicked outside!");
    }
});

http://jsfiddle.net/NLDu3/

Ответ 6

Этот код откроет соответствующее меню и настроит событие для прослушивания кликов. Когда он запускается, он будет проходить через целевых родителей-идентификаторов до тех пор, пока не найдет идентификатор меню. Если это не так, это скроет меню, потому что пользователь щелкнул вне меню. Я протестировал его, и он работает.

function tog_alerts(){
   if($('#Element').css('display') == 'none'){
       $('#Element').show();
       setTimeout(function () {
           document.body.addEventListener('click', Close_Alerts, false);
       }, 500);
   }
}

function Close_Alerts(e){
   var current = e.target;
   var check = 0;
   while (current.parentNode){
      current = current.parentNode
      if(current.id == 'Element'){
         check = 1;
      }
   }
   if(check == 0){
      document.body.removeEventListener('click', Close_Alerts, false);
      $('#Element').hide();         
   }
}

Ответ 7

Я не думаю, что документ вызывает событие click. Попробуйте использовать элемент body для захвата события click. Может потребоваться проверить, что...

Ответ 8

попробуйте этот

    $(document).click(function(event) {

        if(event.target.id === 'xxx' )
            return false;
        else {
              // do some this here
        }

    });

Ответ 9

$(document).click((e) => {
  if ($.contains($(".the-one-you-can-click-and-should-still-open").get(0), e.target)) {
  } else {
    this.onClose();
  }
}); 

Ответ 10

function handler(event) {
 var target = $(event.target);
 if (!target.is("div.menuWraper")) {
  alert("outside");
 }
}
$("#myPage").click(handler);

Ответ 11

    var visibleNotification = false;

  function open_notification() {
        if (visibleNotification == false) {
            $('.notification-panel').css('visibility', 'visible');
            visibleNotification = true;
        } else {
            $('.notification-panel').css('visibility', 'hidden');
            visibleNotification = false;
        }
    }

    $(document).click(function (evt) {
        var target = evt.target.className;
        if(target!="fa fa-bell-o bell-notification")
        {
            var inside = $(".fa fa-bell-o bell-notification");
            if ($.trim(target) != '') {
                if ($("." + target) != inside) {
                    if (visibleNotification == true) {
                        $('.notification-panel').css('visibility', 'hidden');
                        visibleNotification = false;
                    }
                }
            }
        }
    });

Ответ 12

$( "element" ).focusout(function() {
    //enter code here
})