Sự kiện kích hoạt jQuery khi nhấp vào bên ngoài phần tử

Question

$(document).click(function(evt) { 
    var target = evt.currentTarget; 
    var inside = $(".menuWraper"); 
    if (target != inside) { 
     alert("bleep"); 
    } 

}); 

Tôi đang cố gắng tìm hiểu cách để người dùng nhấp vào bên ngoài một div nhất định (menuWraper), nó kích hoạt sự kiện. làm cho mọi nhấp chuột kích hoạt sự kiện, sau đó kiểm tra xem currentTarget đã nhấp có giống với đối tượng được chọn từ $ (". menuWraper") hay không. Tuy nhiên, điều này không làm việc, currentTarget là đối tượng HTML (?) Và $ (". MenuWraper") là đối tượng Object? Tôi rất bối rối.

Answer 1

Chỉ cần gọi menuWraper thành phần của bạn event.stopPropagation() để sự kiện nhấp chuột không bong bóng lên đến document.

Hãy thử nó ra:http://jsfiddle.net/Py7Mu/

$(document).click(function() { 
    alert('clicked outside'); 
}); 

$(".menuWraper").click(function(event) { 
    alert('clicked inside'); 
    event.stopPropagation(); 
}); 

• http://api.jquery.com/event.stopPropagation/

Ngoài ra, bạn có thể return false; thay vì sử dụng event.stopPropagation();

Answer 2

Các ứng dụng phổ biến nhất ở đây được đóng trên cách nhấn vào tài liệu nhưng không phải khi nó đến từ bên trong yếu tố đó, đối với điều này, bạn muốn dừng bọt, như thế này:

$(".menuWrapper").click(function(e) { 
    e.stopPropagation(); //stops click event from reaching document 
}); 
$(document).click(function() { 
    $(".menuWrapper").hide(); //click came from somewhere else 
}); 

Tất cả được làm ở đây là ngăn chặn nhấp chuột từ bubbling up (qua event.stopPrpagation()) khi nó đến từ một yếu tố .menuWrapper. Nếu điều này xảy ra không xảy ra, nhấp chuột đến từ một nơi khác và theo mặc định, hãy thực hiện theo cách đó lên đến document, nếu đến đó, chúng tôi sẽ ẩn các yếu tố .menuWrapper.

Answer 3

Tôi không nghĩ rằng tài liệu cháy sự kiện nhấp chuột. Hãy thử sử dụng phần tử nội dung để nắm bắt sự kiện nhấp chuột. Có cần phải kiểm tra trên đó ...

Answer 4

thử các ..

$(document).click(function(evt) { 
    var target = evt.target.className; 
    var inside = $(".menuWraper"); 
    //alert($(target).html()); 
    if ($.trim(target) != '') { 
     if ($("." + target) != inside) { 
      alert("bleep"); 
     } 
    } 
}); 

Answer 5

nếu bạn có phần tử con như menu thả xuống

$('html').click(function(e) { 
    //if clicked element is not your element and parents aren't your div 
    if (e.target.id != 'your-div-id' && $(e.target).parents('#your-div-id').length == 0) { 
    //do stuff 
    } 
}); 

Answer 6

Tôi biết rằng câu hỏi đã được trả lời, nhưng tôi hy vọng giải pháp của tôi sẽ giúp người khác.

stopPropagation gây ra sự cố trong trường hợp của tôi, vì tôi cần sự kiện click cho sự kiện khác. Hơn nữa, không phải mọi phần tử sẽ làm cho div bị đóng khi được nhấp.

Giải pháp của tôi:

$(document).click(function(e) { 
    if (($(e.target).closest("#mydiv").attr("id") != "mydiv") && 
     $(e.target).closest("#div-exception").attr("id") != "div-exception") { 
     alert("Clicked outside!"); 
    } 
}); 

http://jsfiddle.net/NLDu3/

Answer 7

Mã này sẽ mở menu trong câu hỏi, và sẽ thiết lập một sự kiện click nghe. Khi được kích hoạt nó sẽ lặp qua cha mẹ của id mục tiêu cho đến khi nó tìm thấy id trình đơn. Nếu không, nó sẽ ẩn menu vì người dùng đã nhấp vào bên ngoài trình đơn. Tôi đã thử nghiệm nó và nó hoạt động.

function tog_alerts(){ 
    if($('#Element').css('display') == 'none'){ 
     $('#Element').show(); 
     setTimeout(function() { 
      document.body.addEventListener('click', Close_Alerts, false); 
     }, 500); 
    } 
} 

function Close_Alerts(e){ 
    var current = e.target; 
    var check = 0; 
    while (current.parentNode){ 
     current = current.parentNode 
     if(current.id == 'Element'){ 
     check = 1; 
     } 
    } 
    if(check == 0){ 
     document.body.removeEventListener('click', Close_Alerts, false); 
     $('#Element').hide();   
    } 
} 

Answer 8

thử này một

$(document).click(function(event) { 

     if(event.target.id === 'xxx') 
      return false; 
     else { 
       // do some this here 
     } 

    }); 

Answer 9

$(document).click((e) => { 
    if ($.contains($(".the-one-you-can-click-and-should-still-open").get(0), e.target)) { 
    } else { 
    this.onClose(); 
    } 
}); 

Answer 10

function handler(event) { 
var target = $(event.target); 
if (!target.is("div.menuWraper")) { 
    alert("outside"); 
} 
} 
$("#myPage").click(handler);