Як приховати елемент у події клацання в будь-якому місці поза елементом?

121

Мені хотілося б знати, чи це правильний спосіб приховування видимих елементів при натисканні будь-де на сторінці.

$(document).click(function (event) {            
    $('#myDIV:visible').hide();
});

Елемент (div, span тощо) не повинен зникати, коли подія клацання відбувається в межах елемента.

jquery events event-bubbling

— Франек
джерело

204

Якщо я розумію, ви хочете приховати div, натиснувши де-небудь, крім div, і якщо ви натискаєте клавішу над дівом, вона НЕ повинна закриватися. Ви можете зробити це за допомогою цього коду:

$(document).click(function() {
    alert("me");
});
$(".myDiv").click(function(e) {
    e.stopPropagation(); // This is the preferred method.
    return false;        // This should not be used unless you do not want
                         // any click events registering inside the div
});

Це прив'язує клацання до всієї сторінки, але якщо ви натиснете на відповідний div, це скасує подію натискання.

— Джеремі Б.
джерело

1

Це прекрасно працює .. але коли я натискаю кнопку, яка викликає спливаюче вікно, тоді з’являється спливаюче вікно, а потім знову зникає. Що робити для цього, оскільки документ вживає одночасно дві дії. щоб зателефонувати на спливаюче вікно та натиснути, вимкнути спливаюче вікно на тіліКлік

— Veer Shrivastav

@VeerShrivastav те саме відбувається і тут. e.stopPropagation (); зупинить усі обробники кліків

— брунод

Це не працює у Safari, якщо у вас є інші елементи всередині .myDivелемента. Наприклад, якщо у вас є спадне меню вибору .myDiv. Після натискання кнопки "Вибір" вона подумає, що ви клацнете поза рамкою

— CodeGodie

24

Спробуйте це

 $('.myDiv').click(function(e) { //button click class name is myDiv
  e.stopPropagation();
 })

 $(function(){
  $(document).click(function(){  
  $('.myDiv').hide(); //hide the button

  });
});

Я використовую назву класу замість ідентифікатора , тому що в asp.net ви повинні турбуватися про зайві речі .net приєднується до ідентифікатора

EDIT - Оскільки ви додали ще один фрагмент, він буде працювати так:

 $('.myDiv').click(function() { //button click class name is myDiv
  e.stopPropagation();
 })

 $(function(){
  $('.openDiv').click(function() {
  $('.myDiv').show(); 

  });
  $(document).click(function(){  
  $('.myDiv').hide(); //hide the button

  });
});

— TStamper
джерело

22

Станом на jQuery 1.7 є новий спосіб обробляти події. Я думав, що відповім тут просто для того, щоб продемонструвати, як я можу йти цим "новим" шляхом. Якщо ви цього не зробили, рекомендую прочитати документи jQuery для методу "ввімкнено" .

var handler = function(event){
  // if the target is a descendent of container do nothing
  if($(event.target).is(".container, .container *")) return;

  // remove event handler from document
  $(document).off("click", handler);

  // dostuff
}

$(document).on("click", handler);

Тут ми зловживаємо селекторами jQuery і бурхливими подіями. Зауважте, що я переконайтесь, що після цього очищую обробник подій. Ви можете автоматизувати цю поведінку за допомогою $('.container').one( див. Docs ), але тому, що нам потрібно виконати умови в обробниках, які тут не застосовуються.

— Бен Тейлор
джерело

13

Цей наступний приклад коду, здається, найкраще працює для мене. У той час як ви можете використовувати "return false", який зупиняє будь-яку обробку цієї події для діва або будь-якого з них дітей. Якщо ви хочете мати контроль над спливаючим поділом (наприклад, формою входу для спливаючих вікон), вам потрібно скористатися event.stopPropogation ().

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <a id="link" href="#">show box</a>
    <div id="box" style="background: #eee; display: none">
        <p>a paragraph of text</p>
        <input type="file"  />
    </div>

    <script src="jquery.js" type="text/javascript"></script>

    <script type="text/javascript">
        var box = $('#box');
        var link = $('#link');

        link.click(function() {
            box.show(); return false;
        });

        $(document).click(function() {
            box.hide();
        });

        box.click(function(e) {
            e.stopPropagation();
        });

    </script>
</body>
</html>

6

Спасибі, Томасе. Я новачок у JS, і я з розумом шукав рішення своєї проблеми. Ваша допомогла.

Я використовував jquery, щоб зробити поле для входу, яке ковзає вниз. Для найкращого досвіду користувача я вирішив змусити поле зникати, коли користувач клацне кудись, а не поле. Я трохи збентежений, використовуючи приблизно чотири години, щоб виправити це. Але ей, я новачок у JS.

Можливо, мій код може комусь допомогти:

<body>
<button class="login">Logg inn</button>
<script type="text/javascript">

    $("button.login").click(function () {
        if ($("div#box:first").is(":hidden")) {
                $("div#box").slideDown("slow");} 
            else {
                $("div#box").slideUp("slow");
                }
    });
    </script>
<div id="box">Lots of login content</div>

<script type="text/javascript">
    var box = $('#box');
    var login = $('.login');

    login.click(function() {
        box.show(); return false;
    });

    $(document).click(function() {
        box.hide();
    });

    box.click(function(e) {
        e.stopPropagation();
    });

</script>

</body>

— Томмі
джерело

5

Що ви також можете зробити:

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

  var container = $("div");

   if (!container.is(e.target) && container.has(e.target).length === 0)
  {
 container.fadeOut('slow');

   }

});

Якщо ваша ціль не є дівою, то схойте діва, перевіривши, чи його довжина дорівнює нулю.

— Сандіп Пал
джерело

5

Я зробив нижче. Думка поділитися, щоб хтось інший також міг отримати користь.

$("div#newButtonDiv").click(function(){
    $(this).find("ul.sub-menu").css({"display":"block"});

    $(this).click(function(event){
        event.stopPropagation();
        $("html").click(function(){
            $(this).find("ul.sub-menu").css({"display":"none"});
        }
    });
});

Дайте мені знати, чи можу я допомогти комусь у цьому.

— фоксибагга
джерело

Відмінний код і не виконується, якщо div#newButtonDivйого не натискають. Я рекомендую вам зняти другий .click()у рядку 4 (якщо ви це зробите, не забудьте зняти дужки, дужки та крапку з двокрапкою - рядок 9).

— аулла

4

Спробуйте це:

 $(document).mouseup(function (e) {
    var div = $("#yourdivid");
    if (!div.is(e.target) && div.has(e.target).length === 0) 
    {
       div.hide();
     }
    });

— Налан Мадесваран
джерело

3

Інший спосіб приховати div контейнера, коли клацання відбувається в елементі, який не є дітьми;

$(document).on('click', function(e) {
    if(!$.contains($('.yourContainer').get(0), e.target)) {
        $('.yourContainer').hide();
    }
});

— Ренато Гама
джерело

3

  $(document).on('click', function(e) { // Hides the div by clicking any where in the screen
        if ( $(e.target).closest('#suggest_input').length ) {
            $(".suggest_div").show();
        }else if ( ! $(e.target).closest('.suggest_container').length ) {
            $('.suggest_div').hide();
        }
    });

Тут #suggest_input - це ім'я текстового поля, а .suggest_container - це ім'я класу ul, а .suggest_div - головний елемент діви для моєї автоматичної пропозиції.

цей код призначений для приховування елементів div, натиснувши будь-яке місце на екрані. Перш ніж робити кожну річ, будь ласка, зрозумійте код та скопіюйте його ...

— Шейх Арбааз
джерело

2

Спробуйте це, для мене це ідеально підходить.

$(document).mouseup(function (e)
{
    var searchcontainer = $("#search_container");

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

— Хасан Сардар
джерело

2

$('html').click(function() {
//Hide the menus if it is visible
});

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

але потрібно пам’ятати і про ці речі. http://css-tricks.com/dangers-stopping-event-propagation/

— Мухаммед Тахір
джерело

2

Ось робоче CSS / невелике JS-рішення, засноване на відповіді Sandeep Pal:

$(document).click(function (e)
{
  if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
  {
   $("#menu-toggle3").prop('checked', false);
  }
});

Спробуйте це, натиснувши прапорець, а потім поза меню:

https://jsfiddle.net/qo90txr8/

— Бьорг
джерело

1

Це не працює - він приховує .myDIV, коли клацнеш всередині нього.

$('.openDiv').click(function(e) {
$('.myDiv').show(); 
e.stopPropagation();
})

$(document).click(function(){  
$('.myDiv').hide(); 

});

});

<a class="openDiv">DISPLAY DIV</a>

<div class="myDiv">HIDE DIV</div>

— Франек
джерело

значить, ви хочете, щоб div показав, коли посилання розміщене, а потім візьміть, що там стоп. ProPropa .., і виконайте мій варіант

— TStamper

1

Лише 2 невеликих удосконалення вищезазначених пропозицій:

від’єднайте document.click після завершення

припинити розповсюдження на подію, яка викликала це, припускаючи його клацання

jQuery(thelink).click(function(e){
    jQuery(thepop).show();

    // bind the hide controls
    var jpop=jQuery(thepop);
    jQuery(document).bind("click.hidethepop", function() {
            jpop.hide();
            // unbind the hide controls
            jQuery(document).unbind("click.hidethepop");
    });
    // dont close thepop when you click on thepop
    jQuery(thepop).click(function(e) {
        e.stopPropagation();
    });
    // and dont close thepop now 
    e.stopPropagation();
});

— звичайний
джерело

1

$(document).ready(function(){

$("button").click(function(){
   
       
        $(".div3").toggle(1000);
    });
   $("body").click(function(event) {
   if($(event.target).attr('class') != '1' && $(event.target).attr('class') != 'div3'){
       $(".div3").hide(1000);}
    }); 
   
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<button class="1">Click to fade in boxes</button><br><br>

<body style="width:100%;height:200px;background-color:pink;">
<div class="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div><body>

Розгорніть фрагмент

— Ehsan KHAN
джерело

0

$( "element" ).focusout(function() {
    //your code on element
})

— Джафар Чупан
джерело

5

Хоча цей код може вирішити питання, у тому числі пояснення дійсно допомагає покращити якість вашої публікації.

— Шрі

-1

$(document).mouseup(function (e)
{
    var mydiv = $('div#mydiv');
    if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
       search.slideUp();
    }
});

— Мухаммед gitipasand
джерело

-1

Просте рішення: приховати елемент на події клацання в будь-якому місці за межами якогось конкретного елемента.

$(document).on('click', function () {
                $('.element').hide();
            });
            //element will not Hide on click some specific control inside document
            $('.control-1').on('click', function (e) {
                e.stopPropagation();
            });

— Супер Модель
джерело