jQuery click off событие элемента

Question

У меня есть плавающий div, который отображается, и я хочу, чтобы он был скрыт, когда пользователь щелкает div. Это было бы похоже на обратный вызов функции .hover () при наведении курсора на элемент. Только я хочу сделать это за клик.

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

У кого-нибудь есть идеи, как мне легко это сделать?

Answer 1

Если вы хотите очистить div, когда щелкаете где-то еще на странице, вы можете сделать что-то вроде:

$('body').click(function(event) {
    if (!$(event.target).closest('#myDiv').length) {
        $('#myDiv').hide();
    };
});

Answer 2

Другой, возможно, более простой вариант - добавить прозрачный div между плавающим DIV и остальной частью страницы.

Простое событие щелчка на прозрачном DIV может обработать скрытие, и оно позволит избежать проблем, с которыми вы сталкиваетесь при событии click.

Answer 3

Если вы используете Jquery, вы можете использовать селектор, например:

$("*:not(#myDiv)").live("click", function(){
    $("#myDiv").hide();
});

Answer 4

Конечно, вы ищете событие blur ?

Answer 5

Лучший способ сделать это: -

    
$(document).bind('click', function(e) {  

 var $clicked = $(e.target);

    if (!$clicked.parents().hasClass("divtohide")) {
        $(".divtohide").hide();
    }

});

Answer 6

Это сработало для меня,

var mouseOver = false;
$("#divToHide").mouseover(function(){mouseOver=true;});
$("#divToHide").mouseout(function(){mouseOver=false;});
$("body").click(function(){
      if(mouseOver == false) {
           $("#divToHide").hide();
      }
});

Answer 7

     $('body').click(function (event) {        
if ($("#divID").is(':visible')) {
            $('#divID').slideUp();
        }
});

Это можно использовать, чтобы проверить, является ли div видимым, если он видим, то он сдвинет объект вверх.

Answer 8

Например, вы щелкаете по элементу ссылки, чтобы отобразить меню Div, вы просто привязываете функцию размытия к элементу ссылки, чтобы скрыть меню Div

$('a#displaymenu').click(function(){
   $("#divName").toggle();
}).blur(function() {$("#divName").hide()})

Answer 9

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

clickOut = function(selector, element) {
 var hide = function(event) {
  // Hide search options if clicked out
  if (!$(event.originalEvent.target).parents(selector).size())
   $(element).hide();
  else
   $(document).one("click",hide);
 };

 $(document).one("click", hide);
};

Так что, если у вас есть всплывающий элемент, например <div class='popup'>test</div>, вы можете использовать мою функцию, например clickOut("div.popup", $("div.popup"));

Answer 10

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

var div_active, the_div;

the_div = $("#the-div");
div_active = false;

$("#show-the-div-button").click(function() {
  if (div_active) {
    the_div.fadeOut(function(){
      div_active = false;
    });
  } else {
    the_div.fadeIn(function(){
      div_active = true;
    });
  }
});

$("body").click(function() {
  if div_active {
    the_div.fadeOut();
    div_active = false;
  }
});

the_div.click(function() {
  return false;
});