單擊任何地方時隱藏元素

我想在用戶單擊頁面中的任何位置但不在div上時隱藏div。單擊任何地方時隱藏元素

<head> 
<script type="text/javascript" src="jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(function() { 
    $(document).not('.me').click(function() { 
     $('.me').hide() 
    }) 
}) 
</script> 
</head> 
<body> 
<div class="me" style="width:200px; height:200px; background:#F00"> 
test 
</div> 
</body>

來源

2013-05-30 Carlos

您可以使用下面的腳本來實現這個..

<script type="text/javascript"> 
     $(document).click(function (event) { 
      var target = $(event.target); 
      if (!target.parents().andSelf().is('.me')) { 
       $(".me").hide(); 
      } 
     }); 
</script>

上述語法是檢查，如果父是比其他的div（here it's me ），而不是隻隱藏div。

快樂編碼:)

來源

2013-05-30 10:18:58

停止傳播是一個更好，更高效的解決方案。如果你必須一直檢查所有的父母，這可能會傷害更大的DOM ... – kapa

$(document).click(function (e) 
{ 
    var container = $(".me"); 

    if (container.has(e.target).length === 0) 
    { 
     container.hide(); 
    } 
});

來源

2013-05-30 09:51:33 PSR

不錯，很優雅。 – nbrogi

$(function(){ 
    $(document).click(function(){ 
     $('.me').hide() 
    }) 
    $('.me').click(function(){ 
     return false; 
    }) 
})

來源

2013-05-30 09:51:55

你可以將它添加一個click事件到body或html元素以及防止click事件的傳播在你div元素：

$(function() { 
    //bye bye lovely div :) 
    $('html, body').click(function(){ 
     $('.me').hide(); 
    }); 

    //let's avoid the click propagation to the body or html 
    $('.me').click(function(e){ 
     e.stopPropagation(); 
    }); 
});

LIVING EXAMPLE

來源

2013-05-30 09:53:17 Alvaro

您可以使用stopPropagation()：

$(function(){ 
    $(document).click(function(){ 
     $(".me").hide(); 
    }); 
    $(".me").click(function(e){ 
     e.stopPropagation(); 
    }); 
});

入住這jsFiddle

來源

2013-05-30 09:53:51 George

單擊任何地方時隱藏元素

回答

相關問題