Yanıtlar:
Anlıyorsam, div dışında herhangi bir yere tıkladığınızda bir div'i gizlemek istiyorsunuz ve div'in üzerindeyken tıklarsanız, kapatmamalı. Bunu şu kodla yapabilirsiniz:
$(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
});
Bu, tıklamayı tüm sayfaya bağlar, ancak söz konusu div'i tıklarsanız, tıklama olayını iptal eder.
.myDivÖğenin içinde başka öğeler varsa, bu Safari'de çalışmayacaktır . Örneğin, içinde bir açılır menü varsa .myDiv. Seçime tıkladığınızda, kutunun dışına tıkladığınızı düşünecektir.
Bunu dene
$('.myDiv').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});
Kullandığım yerine kimliğinin sınıf adını asp.net sahip olduğunuz çünkü id ekstra şeyler .net Ataşeleri'nden hakkında endişe etmek,
DÜZENLEME- Başka bir parça eklediğiniz için şu şekilde çalışacaktır:
$('.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'den itibaren, olayları işlemenin yeni bir yolu var. Bunu "yeni" yolla nasıl yapabileceğimi göstermek için buraya cevap vereceğimi düşündüm. Henüz yapmadıysanız, "açık" yöntemi için jQuery belgelerini okumanızı tavsiye ederim .
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);
Burada jQuery'nin seçicilerini kötüye kullanıyoruz ve olayların köpürmesini yapıyoruz. Daha sonra olay işleyicisini temizlediğimden emin olduğumu unutmayın. Bu davranışı $('.container').one( bkz: docs ) ile otomatikleştirebilirsiniz, ancak işleyicide burada geçerli olmayan koşullara ihtiyaç duyduğumuz için.
Aşağıdaki kod örneği benim için en iyi şekilde çalışıyor gibi görünüyor. Bununla birlikte, div veya alt öğelerinden herhangi biri için bu olayın tüm işlemesini durduran 'yanlış dönüşü' kullanabilirsiniz. Açılır div'de kontrollere sahip olmak istiyorsanız (örneğin bir açılır giriş formu) event.stopPropogation () kullanmanız gerekir.
<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>
Teşekkürler Thomas. JS'de yeniyim ve sorunuma bir çözüm bulmak için deli arıyorum. Seninkiler yardımcı oldu.
Aşağı kayan bir Giriş kutusu yapmak için jquery kullandım. En iyi kullanıcı deneyimi için, kullanıcı kutu dışında bir yeri tıkladığında kutunun kaybolmasını sağlamaya karar verdim. Bunu düzeltmek için yaklaşık dört saat harcadığım için biraz utandım. Ama hey, JS'de yeniyim.
Belki kodum birine yardımcı olabilir:
<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>
Ayrıca yapabilecekleriniz:
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});
Hedefiniz bir div değilse, uzunluğunun sıfıra eşit olup olmadığını kontrol ederek div'i gizleyin.
Aşağıdakileri yaptım. Başkasının da yararlanabilmesi için paylaşmayı düşündüm.
$("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"});
}
});
});Bu konuda birine yardım edebilirsem haberim olsun.
div#newButtonDivtıklanmadığında çalışmaz . .click()4. satırdaki ikinciyi kaldırmanızı tavsiye ederim (bunu yaparsanız, kapatma parantezlerini, parantezleri ve noktalı virgül - satır 9'u çıkarmayı unutmayın).
Bunu dene:
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});Alt öğe olmayan bir öğede bir tıklama gerçekleştiğinde kapsayıcı div'i gizlemenin başka bir yolu;
$(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();
}
});Burada #suggest_input in, metin kutusunun adıdır ve .suggest_container, ul sınıfı adıdır ve .suggest_div, otomatik önerim için ana div öğesidir.
bu kod, ekranın herhangi bir yerine tıklayarak div öğelerini gizlemek içindir. Her şeyi yapmadan önce lütfen kodu anlayın ve kopyalayın ...
Bunu dene, benim için mükemmel çalışıyor.
$(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();
});ama bunları da aklınızda tutmanız gerekiyor. http://css-tricks.com/dangers-stopping-event-propagation/
İşte Sandeep Pal'ın cevabına dayalı çalışan bir CSS / küçük JS çözümü:
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop('checked', false);
}
});Onay kutusunu ve ardından menünün dışını tıklayarak deneyin:
Bu işe yaramaz - içine tıkladığınızda .myDIV'i gizler.
$('.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>Yukarıdaki öneriler için sadece 2 küçük iyileştirme:
Bir tıklama olduğunu varsayarak, bunu tetikleyen olaydaki yayılmayı durdurun
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();
}
});Basit Çözüm: Belirli bir öğenin dışında herhangi bir yere tıklama olayındaki bir öğeyi gizleyin.
$(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();
});