Используйте jQuery, чтобы скрыть DIV, когда пользователь щелкает за его пределами

Я использую этот код:

$('body').click(function() {
   $('.form_wrapper').hide();
});

$('.form_wrapper').click(function(event){
   event.stopPropagation();
});

и этот HTML:

<div class="form_wrapper">
   <a class="agree" href="javascript:;">I Agree</a>
   <a class="disagree" href="javascript:;">Disagree</a>
</div>

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

30 ответов


имел ту же проблему, придумал это простое решение. Он даже работает рекурсивно:

$(document).mouseup(function(e) 
{
    var container = $("YOUR CONTAINER SELECTOR");

    // if the target of the click isn't the container nor a descendant of the container
    if (!container.is(e.target) && container.has(e.target).length === 0) 
    {
        container.hide();
    }
});

вам лучше пойти с чем-то вроде этого:

var mouse_is_inside = false;

$(document).ready(function()
{
    $('.form_content').hover(function(){ 
        mouse_is_inside=true; 
    }, function(){ 
        mouse_is_inside=false; 
    });

    $("body").mouseup(function(){ 
        if(! mouse_is_inside) $('.form_wrapper').hide();
    });
});

вы можете проверить цель события click, которое срабатывает для тела, вместо того, чтобы полагаться на stopPropagation.

что-то типа:

$("body").click
(
  function(e)
  {
    if(e.target.className !== "form_wrapper")
    {
      $(".form_wrapper").hide();
    }
  }
);

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


этот код обнаруживает любое событие click на странице, а затем скрывает #CONTAINER элемент, если и только если элемент нажали ни #CONTAINER элемент, ни один из его потомков.

$(document).on('click', function (e) {
    if ($(e.target).closest("#CONTAINER").length === 0) {
        $("#CONTAINER").hide();
    }
});

Live DEMO

проверьте, что область щелчка не находится в целевом элементе или в его дочернем

$(document).click(function (e) {
    if ($(e.target).parents(".dropdown").length === 0) {
        $(".dropdown").hide();
    }
});

обновление:

распространение остановки jQuery-лучшее решение

Live DEMO

$(".button").click(function(e){
    $(".dropdown").show();
     e.stopPropagation();
});

$(".dropdown").click(function(e){
    e.stopPropagation();
});

$(document).click(function(){
    $(".dropdown").hide();
});

$(document).click(function(event) {
    if ( !$(event.target).hasClass('form_wrapper')) {
         $(".form_wrapper").hide();
    }
});

обновленное решение:

  • используйте mouseenter и mouseleave вместо
  • из hover использовать Live event binding

var mouseOverActiveElement = false;

$('.active').live('mouseenter', function(){
    mouseOverActiveElement = true; 
}).live('mouseleave', function(){ 
    mouseOverActiveElement = false; 
});
$("html").click(function(){ 
    if (!mouseOverActiveElement) {
        console.log('clicked outside active element');
    }
});

решение без jQuery для самый популярный ответ:

document.addEventListener('mouseup', function (e) {
    var container = document.getElementById('your container ID');

    if (!container.contains(e.target)) {
        container.style.display = 'none';
    }
}.bind(this));

MDN:https://developer.mozilla.org/en/docs/Web/API/Node/contains


Live demo с ESC функциональность

и Desktop и Mobile

var notH = 1,
    $pop = $('.form_wrapper').hover(function(){ notH^=1; });

$(document).on('mousedown keydown', function( e ){
  if(notH||e.which==27) $pop.hide();
});

если в каком-то случае вам нужно убедиться, что ваш элемент действительно виден, когда вы нажимаете на документ: if($pop.is(':visible') && (notH||e.which==27)) $pop.hide();


разве что-то подобное не сработает?

$("body *").not(".form_wrapper").click(function() {

});

или

$("body *:not(.form_wrapper)").click(function() {

});

даже sleaker:

$("html").click(function(){ 
    $(".wrapper:visible").hide();
});

и для сенсорных устройств, таких как IPAD и IPHONE, мы можем использовать следующий код

$(document).on('touchstart', function (event) {
var container = $("YOUR CONTAINER SELECTOR");

if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

вот jsfiddle, который я нашел в другом потоке, также работает с ключом esc:http://jsfiddle.net/S5ftb/404

    var button = $('#open')[0]
    var el     = $('#test')[0]

    $(button).on('click', function(e) {
      $(el).show()
      e.stopPropagation()
    })

    $(document).on('click', function(e) {
      if ($(e.target).closest(el).length === 0) {
        $(el).hide()
      }
    })

    $(document).on('keydown', function(e) {
      if (e.keyCode === 27) {
        $(el).hide()
      }
    })

построенный из удивительного ответа prc322.

function hideContainerOnMouseClickOut(selector, callback) {
  var args = Array.prototype.slice.call(arguments); // Save/convert arguments to array since we won't be able to access these within .on()
  $(document).on("mouseup.clickOFF touchend.clickOFF", function (e) {
    var container = $(selector);

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
      container.hide();
      $(document).off("mouseup.clickOFF touchend.clickOFF");
      if (callback) callback.apply(this, args);
    }
  });
}

Это добавляет пару вещей...

  1. помещен в функцию с обратным вызовом с "неограниченным" args
  2. добавлен вызов jquery .off () в паре с пространством имен событий, чтобы отменить привязку события из документа после его запуска.
  3. включен touchend для мобильных функций

надеюсь, это кому-то поможет!


вместо того, чтобы слушать каждый щелчок на DOM, чтобы скрыть один конкретный элемент, вы можете установить tabindex родитель <div> и слушать focusout событий.

задание tabindex убедитесь, что blur событие на <div> (обычно не).

таким образом, ваш HTML будет выглядеть так:

<div class="form_wrapper" tabindex="0">
    <a class="agree" href="javascript:;">I Agree</a>
    <a class="disagree" href="javascript:;">Disagree</a>
</div>

и ваш JS:

$('.form_wrapper').on('focusout', function(event){
    $('.form_wrapper').hide();
});

var n = 0;
$("#container").mouseenter(function() {
n = 0;

}).mouseleave(function() {
n = 1;
});

$("html").click(function(){ 
if (n == 1) {
alert("clickoutside");
}
});

если у вас возникли проблемы с ios, mouseup не работает на устройстве apple.

работает ли mousedown / mouseup в jquery для ipad?

Я использую этот:

$(document).bind('touchend', function(e) {
        var container = $("YOURCONTAINER");

          if (container.has(e.target).length === 0)
          {
              container.hide();
          }
      });

 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});

p имя элемента. Где можно также передать идентификатор или имя класса или элемента.


верните false, если вы нажмете .form_wrapper:

$('body').click(function() {
  $('.form_wrapper').click(function(){
  return false
});
   $('.form_wrapper').hide();
});

//$('.form_wrapper').click(function(event){
//   event.stopPropagation();
//});

прикрепите событие click к элементам верхнего уровня вне оболочки формы, например:

$('#header, #content, #footer').click(function(){
    $('.form_wrapper').hide();
});

Это также будет работать на сенсорных устройствах, просто убедитесь, что вы не включаете родителя.form_wrapper в вашем списке селекторов.


$(document).ready(function() {
	$('.modal-container').on('click', function(e) {
	  if(e.target == $(this)[0]) {
		$(this).removeClass('active'); // or hide()
	  }
	});
});
.modal-container {
	display: none;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.5);
	z-index: 999;
}

.modal-container.active {
    display: flex;  
}

.modal {
	width: 50%;
	height: auto;
	margin: 20px;
	padding: 20px;
	background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-container active">
	<div class="modal">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac varius purus. Ut consectetur viverra nibh nec maximus. Nam luctus ligula quis arcu accumsan euismod. Pellentesque imperdiet volutpat mi et cursus. Sed consectetur sed tellus ut finibus. Suspendisse porttitor laoreet lobortis. Nam ut blandit metus, ut interdum purus.</p>
	</div>
</div>

Я делал так:

var close = true;

$(function () {

    $('body').click (function(){

        if(close){
            div.hide();
        }
        close = true;
    })


alleswasdenlayeronclicknichtschliessensoll.click( function () {   
        close = false;
    });

});

dojo.query(document.body).connect('mouseup',function (e)
{
    var obj = dojo.position(dojo.query('div#divselector')[0]);
    if (!((e.clientX > obj.x && e.clientX <(obj.x+obj.w)) && (e.clientY > obj.y && e.clientY <(obj.y+obj.h))) ){
        MyDive.Hide(id);
    }
});

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("p").hide();
  });
  $("#show").click(function(){
    $("p").show();
  });
});
</script>
</head>
<body>
<p>If you click on the "Hide" button, I will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>

Я хотел как большинство-проголосовали за предложение, но это не сработало для меня.

этот метод почти такой же, но работал для меня. http://www.codesynthesis.co.uk/code-snippets/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it


(просто добавляя к ответу prc322.)

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

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!$("a").is(e.target) // if the target of the click isn't a link ...
        && !container.is(e.target) // ... or the container ...
        && container.has(e.target).length === 0) // ... or a descendant of the container
    {
        container.hide();
    }
});

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


var exclude_div = $("#ExcludedDiv");;  
$(document).click(function(e){
   if( !exclude_div.is( e.target ) )  // if target div is not the one you want to exclude then add the class hidden
        $(".myDiv1").addClass("hidden");  

}); 

скрипка


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

var boxArray = ["first element's id","second element's id","nth element's id"];
   window.addEventListener('mouseup', function(event){
   for(var i=0; i < boxArray.length; i++){
    var box = document.getElementById(boxArray[i]);
    if(event.target != box && event.target.parentNode != box){
        box.style.display = 'none';
    }
   }
})

так много ответов, должно быть право прохода, чтобы добавили один... Я не видел текущих (jQuery 3.1.1) ответов-так:

$(function() {
    $('body').on('mouseup', function() {
        $('#your-selector').hide();
    });
});

что вы можете сделать, это привязать событие click к документу, которые будут скрывать выпадающее если что-то за пределами выпадающего по щелчку, но не скрывать, если что-то внутри выпадающего по щелчку, так что ваше "шоу" событие (или slidedown или что показывает выпадающий)

    $('.form_wrapper').show(function(){

        $(document).bind('click', function (e) {
            var clicked = $(e.target);
            if (!clicked.parents().hasClass("class-of-dropdown-container")) {
                 $('.form_wrapper').hide();
            }
        });

    });

затем, скрывая его, отмените привязку события click

$(document).unbind('click');