이것이 페이지의 아무 곳이나 클릭했을 때 보이는 요소를 숨기는 올바른 방법인지 알고 싶습니다.
$(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 또는 하위 항목에 대한 해당 이벤트의 모든 처리를 중지하는 ‘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>답변
또한 할 수있는 작업은 다음과 같습니다.
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});대상이 div가 아닌 경우 길이가 0인지 확인하여 div를 숨 깁니다.
답변
나는 아래를했다. 다른 사람도 혜택을 볼 수 있도록 공유를 생각했습니다.
$("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"});
}
});
});누군가를 도울 수 있는지 알려주세요.
