사용자가 DIV 바깥쪽을 클릭할 때 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클릭했을 때 더 이상 작동하지 않는 경우.
같은 문제를 안고, 이 쉬운 해결책을 생각해 냈습니다.재귀적으로도 기능하고 있습니다.
$(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();
}
});
다음과 같은 방법을 사용하는 것이 좋습니다.
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();
});
});
, 「」를 .#CONTAINER가 「도」가 경우.#CONTAINER요소나 그 후손 중 하나.
$(document).on('click', function (e) {
if ($(e.target).closest("#CONTAINER").length === 0) {
$("#CONTAINER").hide();
}
});
stopPropagation에 의존하지 않고 본문에 대해 실행되는 클릭이벤트의 타깃을 체크하는 것이 좋습니다.
예를 들어 다음과 같습니다.
$("body").click
(
function(e)
{
if(e.target.className !== "form_wrapper")
{
$(".form_wrapper").hide();
}
}
);
또한 본문 요소는 브라우저에 표시된 전체 시각 공간을 포함하지 않을 수 있습니다.클릭이 등록되지 않은 경우 대신 HTML 요소에 클릭 핸들러를 추가해야 할 수 있습니다.
클릭 영역이 대상 요소 또는 대상 요소의 하위 영역에 있지 않은지 확인합니다.
$(document).click(function (e) {
if ($(e.target).parents(".dropdown").length === 0) {
$(".dropdown").hide();
}
});
갱신:
jQuery Stop 전파가 최선의 솔루션입니다.
$(".button").click(function(e){
$(".dropdown").show();
e.stopPropagation();
});
$(".dropdown").click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$(".dropdown").hide();
});
$(document).click(function(event) {
if ( !$(event.target).hasClass('form_wrapper')) {
$(".form_wrapper").hide();
}
});
가장 일반적인 답변은 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
솔루션 업데이트 대상:
- 대신 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');
}
});
데스크톱과 모바일 모두에서 작동
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();
이런 거면 되지 않을까요?
$("body *").not(".form_wrapper").click(function() {
});
또는
$("body *:not(.form_wrapper)").click(function() {
});
것이 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();
});
그렇게 많은 답들이 하나 더 추가됐으니 통과권이겠지...현재 답변(jQuery 3.1.1)을 찾을 수 없습니다. 즉, 다음과 같습니다.
$(function() {
$('body').on('mouseup', function() {
$('#your-selector').hide();
});
});
썰매도:
$("html").click(function(){
$(".wrapper:visible").hide();
});
그리고 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();
}
});
(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();
}
});
이는 내 사이트의 링크 중 일부가 페이지에 새로운 내용을 추가하기 때문입니다.탐색 메뉴가 사라짐과 동시에 이 새 내용이 추가되면 사용자가 방향을 잃을 수 있습니다.
여기 다른 스레드에서 찾은 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()
}
})
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);
}
});
}
이게 몇 가지 더...
- "무제한" arg를 가진 콜백이 있는 함수 내에 배치됩니다.
- jquery의 .off()에 이벤트 네임스페이스와 쌍을 이룬 호출을 추가하여 실행 후 문서에서 이벤트를 바인딩 해제했습니다.
- 모바일 기능 지원
이게 누군가에게 도움이 됐으면 좋겠어!
ios에 문제가 있는 경우 마우스 업은 애플 디바이스에서 동작하지 않습니다.
ipad에서는 jquery에 mouldown/mouldup이 작동합니까?
나는 이것을 사용한다:
$(document).bind('touchend', function(e) {
var container = $("YOURCONTAINER");
if (container.has(e.target).length === 0)
{
container.hide();
}
});
var n = 0;
$("#container").mouseenter(function() {
n = 0;
}).mouseleave(function() {
n = 1;
});
$("html").click(function(){
if (n == 1) {
alert("clickoutside");
}
});
$('body').click(function(event) {
if (!$(event.target).is('p'))
{
$("#e2ma-menu").hide();
}
});
p는 요소 이름입니다.ID, 클래스 또는 요소 이름도 전달할 수 있습니다.
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");
}
})
})
.form_wrapper를 클릭하면 false가 반환됩니다.
$('body').click(function() {
$('.form_wrapper').click(function(){
return false
});
$('.form_wrapper').hide();
});
//$('.form_wrapper').click(function(event){
// event.stopPropagation();
//});
클릭 이벤트를 폼 래퍼 외부의 최상위 요소에 첨부합니다.다음은 예를 제시하겠습니다.
$('#header, #content, #footer').click(function(){
$('.form_wrapper').hide();
});
터치 디바이스에서도 동작합니다.실렉터 목록에 .form_wrapper의 부모가 포함되어 있지 않은 것을 확인해 주세요.
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");
}); $(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>클릭 이벤트를 문서에 바인드할 수 있습니다.이 이벤트는 드롭다운 외부에 있는 것이 클릭될 경우 드롭다운은 숨겨지지만 드롭다운 내부에 있는 것이 클릭될 경우 숨겨지지 않으므로 "표시" 이벤트(또는 슬라이드다운 또는 드롭다운이 표시되는 모든 것)
$('.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');
이렇게 했어요.
var close = true;
$(function () {
$('body').click (function(){
if(close){
div.hide();
}
close = true;
})
alleswasdenlayeronclicknichtschliessensoll.click( function () {
close = false;
});
});
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);
}
});
이 코드를 사용하면 원하는 만큼 항목을 숨길 수 있습니다.
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';
}
}
})
의사들에 따르면.blur()보다 많은 시간 동안 기능합니다.<input>태그. 예:
$('.form_wrapper').blur(function(){
$(this).hide();
});
언급URL : https://stackoverflow.com/questions/1403615/use-jquery-to-hide-a-div-when-the-user-clicks-outside-of-it
'code' 카테고리의 다른 글
| 정적 HTML 페이지에 favicon 추가 (0) | 2023.04.08 |
|---|---|
| CSS를 사용하여 요소 배경의 불투명도를 낮추려면 어떻게 해야 합니까? (0) | 2023.04.08 |
| SQL 쿼리에서 변수를 설정하는 방법 (0) | 2023.04.08 |
| 플렉스 아이템을 오른쪽 정렬하는 방법 (0) | 2023.04.08 |
| SQL Developer에서 SQL Server 스토어드 프로시저를 실행하는 방법 (0) | 2023.04.08 |