Как я скрываю элемент на событии щелчка где-нибудь за пределами элемента?

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

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

Элемент (отделение, промежуток, и т.д.) не должен исчезать, когда событие щелчка имеет место в границах элемента.

117
задан TylerH 15 July 2019 в 14:00
поделиться

4 ответа

Если я понимаю, Вы хотите скрыть отделение, когда Вы нажимаете где угодно, но отделение, и если Вы действительно нажимаете, в то время как по отделению, то оно не должно закрываться. Можно сделать это с этим кодом:

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

Это связывает щелчок со всей страницей, но если Вы нажмете на рассматриваемое отделение, то это отменит событие щелчка.

199
ответ дан TylerH 24 November 2019 в 02:05
поделиться

Это не работает - это скрывает .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>
1
ответ дан Franek 24 November 2019 в 02:05
поделиться

Попробуйте это

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

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

  });
});

Я использую имя класса вместо идентификатора, потому что в asp.net необходимо взволновать по поводу дополнительного материала присоединения .NET к идентификатору

РЕДАКТИРОВАНИЕ - Так как Вы добавили другую часть, она будет работать как это:

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

  });
});
24
ответ дан TStamper 24 November 2019 в 02:05
поделиться

Мне кажется, что следующий пример кода работает лучше всего. Хотя вы можете использовать return false, который останавливает всю обработку этого события для div или любого из его дочерних элементов. Если вы хотите иметь элементы управления во всплывающем div (например, всплывающая форма входа в систему), вам необходимо использовать 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>
13
ответ дан 24 November 2019 в 02:05
поделиться
Другие вопросы по тегам:

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