Làm thế nào để làm cho div cơ bản không thể nhấp được?

Question

tôi đã div overlay với:

position: absolute; top: 0; left: 0; widht: 100%; height: 100%; 

Về cơ bản tôi muốn lớp phủ div này để trang trải toàn bộ trang của tôi. Và nó làm những gì tôi cần, nhưng tôi cũng cần những div cơ bản để không thể nhấp được. Chúng thực sự không thể nhấp được nhưng chỉ có trong FF, Safari và Chrome. trong IE và Opera bạn vẫn có thể nhấp vào nút bên dưới.

Có ai có bất kỳ ý tưởng nào về cách tôi có thể đạt được "hành vi cơ bản không thể nhấp" này không?

Answer 1

Thêm trình xử lý onclick cho div lớp phủ.

Answer 2

Bạn cũng cần sử dụng chỉ mục z để đảm bảo rằng div mới của bạn nằm trên mọi thứ khác. Nếu không có thuộc tính này bạn đang ở lòng thương xót của trình duyệt về cái nào sẽ được trên đầu và nhận được onclick

Cũng lưu ý của một trình duyệt IE được biết đến (phiên bản cũ) lỗi rằng loại đầu vào lựa chọn bỏ qua z-index

Answer 3

Nếu bạn đang sử dụng một cái gì đó giống như jQuery, bạn có thể làm một cái gì đó giống như

$("a:not(.overlay)").click(function(e) { e.preventDefault(); }); 
$("input:not(.overlay)").click(function(e) { e.attr("disabled", "disabled"); }); 

bạn sẽ cung cấp cho tất cả mọi thứ trong lớp phủ của bạn (liên kết, các nút, vv) lớp overlay, và điều này sẽ có hiệu quả vô hiệu hóa tất cả mọi thứ khác trên trang của bạn.

Answer 4

Tthe overlay CSS với:

z-index: 10000; 

sẽ chăm sóc nó.

Answer 5

này có thể dễ dàng được thực hiện bằng javascript:

• Tạo một div che toàn bộ trang với z-index cao
• Tận dụng mặt nạ bắt tất cả nhấp chuột
• Khi tháo mặt nạ, trang trở thành có thể nhấp lại.

Phương pháp này tất nhiên có thể được sử dụng trên tất cả các phần tử dom, không chỉ cơ thể. mẫu

var mask = $('<div></div>') 
    .css({ 
    position: 'absolute', 
    width: '100%', 
    height: '100%', 
    top: 0, 
    left: 0, 
    'z-index': 10000 
    }) 
    .appendTo(document.body) 
    .click(function(event){ 
    event.preventDefault(); 
    return false; 
    }) 

Làm việc ở đây: http://jsfiddle.net/GTPW3/3/

Answer 6

.class {pointer-events: none;}