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

Question

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

1070

html jquery hide styling

Источник

user157173 10 сен '09 в 06:11

41 ответ

Решение

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

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

212

Источник

user2083379 10 сен '09 в 06:23

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

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

108

Источник

user254592 09 май '13 в 20:13

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

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

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

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

79

Источник

user162355 10 сен '09 в 06: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();
});

59

Источник

user2459296 29 апр '14 в 08:28

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

21

Источник

user145190 10 сен '09 в 06:39

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

20

Источник

user99256 27 июл '15 в 12:40

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

используйте вместо этого 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');
    }
});

18

Источник

user159086 27 апр '11 в 14:32

Живая демоверсия с функциональностью 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();

10

Источник

user383904 15 сен '13 в 20:57

Не будет ли что-то подобное этой работой?

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

});

или же

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

});

9

Источник

user462065 26 янв '11 в 22:56

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

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

8

Источник

user3606125 28 апр '18 в 11:31

Вместо прослушивания каждого отдельного клика по 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();
});

8

Источник

user1189684 18 июн '15 в 18:01

Даже спальный

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

7

Источник

user888744 10 авг '11 в 20:58

А для сенсорных устройств, таких как 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();
    }
});

6

Источник

user1045296 27 апр '14 в 07:17

Вот 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()
      }
    })

6

Источник

user1922747 18 июл '13 в 01:06

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

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

6

Источник

user1169881 11 ноя '14 в 10:48

Построен из удивительного ответа 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);
    }
  });
}

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

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

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

6

Источник

user1299780 24 мар '16 в 16:09

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

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

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

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

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

5

Источник

user2271066 14 май '13 в 07:56

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

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

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

4

Источник

user841153 12 июл '11 в 16:37

Скопировано с 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");
        }
    })
})

4

Источник

user3151197 14 июн '18 в 07:52

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

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

4

Источник

user2598426 19 июл '13 в 07:17

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

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

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

3

Источник

user2078622 13 янв '14 в 10:15

$(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>

3

Источник

user5169275 21 окт '16 в 12:15

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

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

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

3

Источник

user3352080 25 фев '14 в 16:01

У меня работает на всех устройствах (2023) ;)

      <section class="form-wrapper">
 <div class="popup-container">
  Popup Me
 </div>
</section>



$('.form-wrapper').on('click', function(e) {
  var pop_container = $(".popup-container");

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

3

Источник

user5287215 19 дек '22 в 06:48

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

3

Источник

user3675978 29 янв '15 в 10:03

С помощью этого кода вы можете скрыть столько элементов, сколько хотите

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';
    }
   }
})

2

Источник

user4793251 11 сен '15 в 15:03

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

2

Источник

user2640249 25 дек '13 в 00:20

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

var close = true;

$(function () {

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

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


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

});

2

Источник

user2822517 19 ноя '13 в 12:46

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

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

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

    });

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

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

2

Источник

user121379 23 авг '11 в 22:48

Другие вопросы по тегам html jquery hide styling

12 сен '11 в 09:19 2011-09-12 09:19 · Accepted Answer · 2011-09-12 09:19

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

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

2688

Источник

12 сен '11 в 09:19