Clickout trong jquery

Question

Cách dễ nhất để thực hiện một lần nhấp trong jquery là nơi mà một hộp div ẩn nếu được nhấp vào bất kỳ đâu bên ngoài nó.

Answer 1

Tôi không thích các giải pháp sử dụng stopPropagation vì thường tôi đang sử dụng sự kiện để quản lý các liên kết khác nhau. Tôi không muốn phải lo lắng rằng họ có thể ngừng làm việc nếu hộp tồn tại. lựa chọn của tôi sẽ giống như thế này:

var $box = $('#box'); 
$(document.body).click(function(){ 
    if (!$box.has(this).length) { // if the click was not within $box 
     $box.hide(); 
    } 
}); 

Chức năng has lọc lựa chọn và trả về các yếu tố duy nhất nếu chúng chứa các yếu tố truyền như tham số (bạn cũng có thể sử dụng một chuỗi selector, nhưng đó không phải là liên quan ở đây). Nếu nhấp chuột nằm ngoài hộp, length sẽ là 0 để điều kiện sẽ chuyển và hộp sẽ bị ẩn.

Điều này sẽ được tối ưu hóa bằng cách đặt giá trị boolean cho dù hộp hiện có hiển thị và chỉ thực hiện cuộc gọi has nếu hiện tại đang hiển thị.

Answer 2

$('body').click(function() { 
    $('#box').fadeOut(); 
}); 

$('#box').click(function(e) { 
    e.stopPropagation(); 
}); 

Điều này hoạt động vì #box sẽ nhận sự kiện nhấp trước nếu bạn nhấp vào bên trong. Kể từ khi tuyên truyền được dừng lại, xử lý gắn liền với cơ thể sẽ không nhận được nó để hộp sẽ không được đóng trừ khi bạn nhấp vào bên ngoài của hộp.

Nếu bạn muốn nó để ẩn ngay lập tức, sử dụng .hide()

tôi đã có stopPropagation() lừa từ How do I detect a click outside an element?

Answer 3

Tôi biết rằng jQuery có sự kiện "focusout" cho các yếu tố hình thức, không chắc chắn nếu nó có thể có lẽ được sử dụng cho một

Answer 4

như thế này:

$("#thediv").show(0, function() { 
    var that = $(this); 
    $(document).bind("click", function(e) { 
     if($(e.target).attr("id") != that.attr("id")) { 
      that.hide(); 
      $(this).unbind("click"); 
     } 
    }); 
}); 

fiddle đây: http://jsfiddle.net/XYbmE/3/

Answer 5

Bind một chức năng nhấp chuột vào tài liệu riêng của mình:

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

Sau đó ràng buộc một chức năng để cùng một sự kiện trên div chính nó và trả về false vì vậy sự kiện sẽ không bong bóng lên đến tài liệu .

$('#mydiv').click(function(e){ 
    alert('mydiv click'); 
    return false; 
} 

Answer 6

Heres giải pháp của tôi

var ClickOut = {}; 

    ClickOut.list = []; 

    ClickOut.Add = function(jqel, callback) { 
     var i = ClickOut.list.push({jqel:jqel, callback:callback}); 
     return (i-1); 
    } 

    ClickOut.Remove = function(i) { 
     ClickOut.list.splice(i, 1); 
    } 

    ClickOut.Init = function() { 
     $('body').click(function(e) { 
      for(var x = 0; x < ClickOut.list.length; x++) { 
       if (!ClickOut.list[x].jqel.has(e.target).length) { 
        ClickOut.list[x].callback(); 
       } 
      } 
     }); 
    } 

Answer 7

tôi khuyên bạn nên sử dụng lib này https://github.com/gsantiago/jquery-clickout. Thật tuyệt vời!

$('button').on('clickout', function (e) { 
    console.log('click outside button') 
})