답변:
내가 이해한다면 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. 예를 들어 내부에 선택 드롭 다운이있는 경우 .myDiv. 선택을 클릭하면 상자 외부를 클릭하는 것으로 간주됩니다.
이 시도
$('.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 또는 하위 항목에 대한 해당 이벤트의 모든 처리를 중지하는 'return false'를 사용할 수 있습니다. 팝업 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>나는 아래를했다. 다른 사람도 혜택을 볼 수 있도록 공유를 생각했습니다.
$("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 행을 제거하는 것을 잊지 마십시오).
이 시도:
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.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();
}
});여기 #suggest_input in은 텍스트 상자의 이름이고 .suggest_container는 ul 클래스 이름이고 .suggest_div는 내 자동 제안의 주요 div 요소입니다.
이 코드는 화면의 아무 곳이나 클릭하여 div 요소를 숨기는 데 사용됩니다. 모든 일을하기 전에 코드를 이해하고 복사하십시오.
이것을 시도해보십시오, 그것은 나에게 완벽하게 작동합니다.
$(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();
});하지만 이것도 염두에 두어야합니다. http://css-tricks.com/dangers-stopping-event-propagation/
다음은 Sandeep Pal의 답변을 기반으로 작동하는 CSS / 작은 JS 솔루션입니다.
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop('checked', false);
}
});체크 박스를 클릭 한 다음 메뉴 외부에서 사용해보십시오.
이것은 작동하지 않습니다. 내부를 클릭하면 .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>위의 제안에 대한 2 가지 작은 개선 사항 :
이를 트리거 한 이벤트에서 전파를 중지하고 클릭이라고 가정합니다.
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>$(document).mouseup(function (e)
{
var mydiv = $('div#mydiv');
if (!mydiv.is(e.target) && mydiv.has(e.target).length === 0){
search.slideUp();
}
});