$(document).click(function(evt) {
    var target = evt.currentTarget;
    var inside = $(".menuWraper");
    if (target != inside) {
        alert("bleep");
    }

});

Я пытаюсь выяснить, как сделать так, чтобы, если пользователь щелкает за пределами определенного элемента div (menuWraper), он вызывал событие ... Я понял, что могу просто заставить каждый щелчок вызывать событие, а затем проверить, является ли нажатой currentTarget такой же, как объект, выбранный из $ (". menuWraper"). Однако это не работает, currentTarget - это объект HTML (?), А $ (". MenuWraper") - это объект-объект? Я очень смущен.

35
tpae 23 Июл 2010 в 05:46

11 ответов

Лучший ответ

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

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

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

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

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

70
user113716 23 Июл 2010 в 01:50
    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;
                    }
                }
            }
        }
    });
0
Programer_saeed 10 Ноя 2018 в 21:13

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

$(document).click(function(evt) {
    var target = evt.target.className;
    var inside = $(".menuWraper");
    //alert($(target).html());
    if ($.trim(target) != '') {
        if ($("." + target) != inside) {
            alert("bleep");
        }
    }
});
4
rob waminal 23 Июл 2010 в 02:03

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

1
iWantSimpleLife 23 Июл 2010 в 01:51

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

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();         
   }
}
2
Baz Love 5 Авг 2015 в 04:40

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

$(".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 элементы ,

12
Nick Craver 23 Июл 2010 в 01:50
$(document).click((e) => {
  if ($.contains($(".the-one-you-can-click-and-should-still-open").get(0), e.target)) {
  } else {
    this.onClose();
  }
}); 
1
Jack Vo 17 Окт 2017 в 02:44

Попробуй это

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

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

    });
0
Muhammad Usman 20 Авг 2014 в 13:54
function handler(event) {
 var target = $(event.target);
 if (!target.is("div.menuWraper")) {
  alert("outside");
 }
}
$("#myPage").click(handler);
0
ghazizadeh 14 Янв 2018 в 04:36

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

$('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
  }
});
20
Alexey Sukhikh 7 Авг 2012 в 10:07

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

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/

2
edjroot 25 Мар 2014 в 00:36