Tôi muốn biết liệu đây có phải là cách chính xác để ẩn các phần tử hiển thị khi được nhấp vào bất kỳ đâu trên trang hay không.
$(document).click(function (event) {
$('#myDIV:visible').hide();
});Phần tử (div, span, v.v.) không được biến mất khi sự kiện nhấp chuột xảy ra trong ranh giới của phần tử.
Câu trả lời:
Nếu tôi hiểu, bạn muốn ẩn một div khi bạn nhấp vào bất kỳ đâu ngoại trừ div và nếu bạn nhấp trong khi qua div, thì nó KHÔNG nên đóng. Bạn có thể làm điều đó với mã này:
$(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
});Điều này liên kết nhấp chuột với toàn bộ trang, nhưng nếu bạn nhấp vào div được đề cập, nó sẽ hủy sự kiện nhấp chuột.
.myDivphần tử. Ví dụ: nếu bạn có một menu thả xuống chọn bên trong .myDiv. Khi bạn nhấp vào lựa chọn, nó sẽ nghĩ rằng bạn đang nhấp vào bên ngoài hộp.
Thử cái này
$('.myDiv').click(function(e) { //button click class name is myDiv
e.stopPropagation();
})
$(function(){
$(document).click(function(){
$('.myDiv').hide(); //hide the button
});
});Tôi sử dụng tên lớp thay vì ID , vì trong asp.net, bạn phải lo lắng về những thứ bổ sung .net gắn vào id
CHỈNH SỬA- Vì bạn đã thêm một đoạn khác, nó sẽ hoạt động như thế này:
$('.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
});
});Kể từ jQuery 1.7, có một cách mới để xử lý các sự kiện. Tôi nghĩ rằng tôi trả lời ở đây chỉ để chứng minh cách tôi có thể thực hiện điều này theo cách "mới". Nếu chưa, tôi khuyên bạn nên đọc tài liệu jQuery cho phương thức "bật" .
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);Ở đây chúng tôi đang lạm dụng các bộ chọn của jQuery và tạo ra các sự kiện. Lưu ý rằng tôi đảm bảo rằng tôi đã dọn dẹp trình xử lý sự kiện sau đó. Bạn có thể tự động hóa hành vi này với $('.container').one( xem: docs ) nhưng vì chúng tôi cần thực hiện các điều kiện trong trình xử lý không áp dụng ở đây.
Ví dụ mã sau đây dường như phù hợp nhất với tôi. Mặc dù bạn có thể sử dụng 'return false' để dừng tất cả việc xử lý sự kiện đó cho div hoặc bất kỳ phần tử con nào của nó. Nếu bạn muốn có các điều khiển trên div bật lên (ví dụ: một biểu mẫu đăng nhập bật lên), bạn cần sử dụng 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>Cảm ơn, Thomas. Tôi mới làm quen với JS và tôi đang tìm kiếm một giải pháp cho vấn đề của mình một cách điên cuồng. Trân đã giúp.
Tôi đã sử dụng jquery để tạo Hộp đăng nhập trượt xuống. Để có trải nghiệm người dùng tốt nhất, tôi quyết định làm cho hộp biến mất khi người dùng nhấp vào đâu đó trừ hộp. Tôi hơi lúng túng khi sử dụng khoảng bốn giờ để sửa lỗi này. Nhưng này, tôi mới làm quen với JS.
Có lẽ mã của tôi có thể giúp ai đó:
<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>Những gì bạn cũng có thể làm là:
$(document).click(function (e)
{
var container = $("div");
if (!container.is(e.target) && container.has(e.target).length === 0)
{
container.fadeOut('slow');
}
});Nếu mục tiêu của bạn không phải là div thì hãy ẩn div bằng cách kiểm tra độ dài của nó có bằng không.
Tôi đã làm như dưới đây. Suy nghĩ chia sẻ để người khác cũng có thể được hưởng lợi.
$("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"});
}
});
});Hãy cho tôi biết nếu tôi có thể giúp ai đó về vấn đề này.
div#newButtonDivkhông được nhấp vào. Tôi khuyên bạn nên bỏ dấu thứ hai .click()trên dòng 4 (nếu bạn làm như vậy, hãy nhớ bỏ dấu ngoặc nhọn, dấu ngoặc đơn và dấu chấm phẩy - dòng 9).
Thử cái này:
$(document).mouseup(function (e) {
var div = $("#yourdivid");
if (!div.is(e.target) && div.has(e.target).length === 0)
{
div.hide();
}
});Một cách khác để ẩn div vùng chứa khi nhấp chuột xảy ra trong phần tử không phải con;
$(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();
}
});Ở đây #suggest_input in là tên của hộp văn bản và .suggest_container là tên lớp ul và .suggest_div là phần tử div chính cho đề xuất tự động của tôi.
mã này là để ẩn các phần tử div bằng cách nhấp vào bất kỳ vị trí nào trên màn hình. Trước khi làm mọi việc, vui lòng hiểu mã và sao chép nó ...
Hãy thử điều này, nó hoạt động hoàn hảo cho tôi.
$(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();
});nhưng bạn cũng cần lưu ý những điều này. http://css-tricks.com/dangers-stopping-event-propagation/
Đây là một giải pháp CSS / JS nhỏ đang hoạt động dựa trên câu trả lời của Sandeep Pal:
$(document).click(function (e)
{
if (!$("#noticeMenu").is(e.target) && $("#noticeMenu").has(e.target).length == 0)
{
$("#menu-toggle3").prop('checked', false);
}
});Hãy dùng thử bằng cách nhấp vào hộp kiểm và sau đó bên ngoài menu:
Điều này không hoạt động - nó ẩn .myDIV khi bạn nhấp vào bên trong nó.
$('.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>Chỉ cần 2 cải tiến nhỏ cho các đề xuất trên:
ngừng tuyên truyền về sự kiện đã kích hoạt điều này, giả sử nó là một lần nhấp
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();
}
});Giải pháp đơn giản: ẩn một phần tử trên sự kiện nhấp chuột ở bất kỳ đâu bên ngoài một số phần tử cụ thể.
$(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();
});