Используйте 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 и когда они больше не работают при нажатии.

+920
10 сент. '09 в 6:11
источник поделиться
37 ответов
  • 1
  • 2

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

$(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();
    }
});
+2390
12 сент. '11 в 9:19
источник

Связанные вопросы


Похожие вопросы

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

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();
    });
});
+199
10 сент. '09 в 6:23
источник

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

$(document).on('click', function (e) {
    if ($(e.target).closest("#CONTAINER").length === 0) {
        $("#CONTAINER").hide();
    }
});
+73
09 мая '13 в 20:13
источник

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

Что-то вроде:

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

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

+72
10 сент. '09 в 6:20
источник

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();
});
+30
29 апр. '14 в 8:28
источник
$(document).click(function(event) {
    if ( !$(event.target).hasClass('form_wrapper')) {
         $(".form_wrapper").hide();
    }
});
+18
10 сент. '09 в 6:39
источник

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

  • используйте mouseenter и mouseleave вместо
  • привязки привязки к действию в реальном времени

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');
    }
});
+16
27 апр. '11 в 14:32
источник

Решение без 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

+12
27 июл. '15 в 12:40
источник

Демонстрационная версия с функциональностью ESC

Работает как на настольном, так и на мобильном

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();

+8
15 сент. '13 в 20:57
источник

Не было бы такого, как эта работа?

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

});

или

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

});
+6
26 янв. '11 в 22:56
источник

Здесь 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()
      }
    })
+4
18 июл. '13 в 1:06
источник

Построен для превосходного ответа 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);
    }
  });
}

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

  • Размещается внутри функции с обратным вызовом с "неограниченными" аргументами
  • Добавлен вызов jquery.off() в паре с пространством имен событий, чтобы отменить событие из документа после его запуска.
  • Включено касание для мобильных функций.

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

+4
24 мар. '16 в 16:09
источник

А для устройств Touch, таких как 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();
    }
});
+4
27 апр. '14 в 7:17
источник

Вместо того, чтобы прослушивать каждый щелчок по 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();
});
+4
18 июн. '15 в 18:01
источник

Даже омыватель:

$("html").click(function(){ 
    $(".wrapper:visible").hide();
});
+4
10 авг. '11 в 20:58
источник

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

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

//$('.form_wrapper').click(function(event){
//   event.stopPropagation();
//});
+2
13 янв. '14 в 10:15
источник

Скопировано с https://sdtuts.com/click-on-not-specified-element/

Живая демоверсия http://demos.sdtuts.com/click-on-specified-element

$(document).ready(function () {
    var is_specified_clicked;
    $(".specified_element").click(function () {
        is_specified_clicked = true;
        setTimeout(function () {
            is_specified_clicked = false;
        }, 200);
    })
    $("*").click(function () {
        if (is_specified_clicked == true) {
//WRITE CODE HERE FOR CLICKED ON OTHER ELEMENTS
            $(".event_result").text("you were clicked on specified element");
        } else {
//WRITE CODE HERE FOR SPECIFIED ELEMENT CLICKED
            $(".event_result").text("you were clicked not on specified element");
        }
    })
})
+2
14 июн. '18 в 7:52
источник

Если у вас проблемы с ios, mouseup не работает на яблочном устройстве.

делает mousedown/mouseup в jquery для ipad?

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

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

          if (container.has(e.target).length === 0)
          {
              container.hide();
          }
      });
+2
14 мая '13 в 7:56
источник

(Просто добавьте ответ 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();
    }
});

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

+2
11 нояб. '14 в 10:48
источник
 $('body').click(function(event) {
    if (!$(event.target).is('p'))
    {
        $("#e2ma-menu").hide();
    }
});

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

+2
19 июл. '13 в 7:17
источник

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

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

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

+2
25 февр. '14 в 16:01
источник

$(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>
+2
21 окт. '16 в 12:15
источник
var n = 0;
$("#container").mouseenter(function() {
n = 0;

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

$("html").click(function(){ 
if (n == 1) {
alert("clickoutside");
}
});
+2
12 июл. '11 в 16:37
источник

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

var boxArray = ["first element id","second element id","nth element 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';
    }
   }
})
+1
11 сент. '15 в 15:03
источник

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

$(function() {
    $('body').on('mouseup', function() {
        $('#your-selector').hide();
    });
});
+1
28 апр. '18 в 11:31
источник
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);
    }
});
+1
25 дек. '13 в 0:20
источник

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

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

+1
11 июн. '14 в 1:35
источник

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");  

}); 

FIDDLE

+1
29 янв. '15 в 10:03
источник

я сделал это так:

var close = true;

$(function () {

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

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


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

});
+1
19 нояб. '13 в 12:46
источник
<!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>
+1
22 апр. '14 в 12:41
источник
  • 1
  • 2

Посмотрите другие вопросы по меткам или Задайте вопрос