요소 외부의 클릭 이벤트에서 요소를 숨기려면 어떻게합니까?
페이지의 아무 곳이나 클릭하면 보이는 요소를 숨기는 올바른 방법인지 알고 싶습니다.
$(document).click(function (event) {
$('#myDIV:visible').hide();
});
클릭 이벤트가 요소의 경계 내에서 발생할 때 요소 (div, span 등)가 사라지지 않아야합니다.
이해하면 div 이외의 다른 곳을 클릭하면 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를 클릭하면 클릭 이벤트가 취소됩니다.
이 시도
$('.myDiv').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
내가 사용하는 대신 ID의 클래스 이름을 asp.net 당신이 가지고 있기 때문에 ID로 여분의 물건 그물에 첨부합니다 대한 걱정에,
편집- 다른 조각을 추가 했으므로 다음과 같이 작동합니다.
$('.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
});
});
jQuery 1.7부터는 이벤트를 처리하는 새로운 방법이 있습니다. 나는 이것이 "새로운"방식으로 어떻게 진행될 수 있는지를 보여주기 위해 여기에 대답 할 것이라고 생각했다. 그렇지 않은 경우 "on"메소드에 대한 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 참조) 로이 동작을 자동화 할 수 있지만 여기서 적용 할 수없는 핸들러 내에서 조건을 수행해야하기 때문입니다.
이 다음 코드 예제는 나에게 가장 적합한 것 같습니다. 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>
고마워 토마스 나는 JS를 처음 접했고 내 문제에 대한 해결책을 찾기 위해 미쳤습니다. 당신이 도와주었습니다.
jquery를 사용하여 아래로 미끄러지는 로그인 상자를 만들었습니다. 최상의 사용자 경험을 위해 사용자가 상자 이외의 곳을 클릭하면 상자가 사라지 길 원했습니다. 나는 이것을 고치는 약 4 시간을 사용하는 것에 약간 당황했다. 하지만 안녕하세요, 저는 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>
당신이 할 수있는 일은 :
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});
타겟이 div가 아닌 경우 길이가 0인지 확인하여 div를 숨기십시오.
I did the below. Thought of sharing so someone else could also benefit.
$("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"});
}
});
});
Let me know if I can help someone on this.
Another way of hiding the container div when a click happens in a not children element;
$(document).on('click', function(e) {
if(!$.contains($('.yourContainer').get(0), e.target)) {
$('.yourContainer').hide();
}
});
$(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();
}
});
Here #suggest_input in is the name of textbox and .suggest_container is the ul class name and .suggest_div is the main div element for my auto-suggest.
this code is for hiding the div elements by clicking any where in the screen. Before doing every thing please understand the code and copy it...
Try this:
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});
Try this, it's working perfect for me.
$(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();
}
});
$('html').click(function() {
//Hide the menus if it is visible
});
$('#menu_container').click(function(event){
event.stopPropagation();
});
but you need to keep in mind these things as well. http://css-tricks.com/dangers-stopping-event-propagation/
Here is a working CSS/small JS solution based on the answer of Sandeep Pal:
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop('checked', false);
}
});
Try it out by clicking the checkbox and then outside of the menu:
https://jsfiddle.net/qo90txr8/
This doesn't work - it hides the .myDIV when you click inside of it.
$('.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>
Just 2 small improvements to the above suggestions:
- unbind the document.click when done
stop propagation on the event that triggered this, assuming its a 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(); });
$(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>$( "element" ).focusout(function() {
//your code on element
})
$(document).mouseup(function (e)
{
var mydiv = $('div#mydiv');
if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
search.slideUp();
}
});
Simple Solution: hide an element on a click event anywhere outside of some specific element.
$(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();
});
'Programing' 카테고리의 다른 글
| MySQL에서 값을 NULL로 설정 (0) | 2020.07.21 |
|---|---|
| Swift에서 프로그래밍 방식으로 UIButton 만들기 (0) | 2020.07.21 |
| jquery 가로 드되었는지 확인한 다음 false이면로드하십시오. (0) | 2020.07.21 |
| 선택 2 드롭 다운이지만 사용자가 새 값을 허용 하시겠습니까? (0) | 2020.07.21 |
| MAC 주소의 정규식은 무엇입니까? (0) | 2020.07.21 |