Tôi có một divcái mà có background:transparent, cùng với border. Bên dưới này div, tôi có nhiều yếu tố hơn.
Hiện tại, tôi có thể nhấp vào các yếu tố cơ bản khi tôi nhấp bên ngoài lớp phủ div. Tuy nhiên, tôi không thể nhấp vào các yếu tố cơ bản khi nhấp trực tiếp vào lớp phủ div.
Tôi muốn có thể nhấp qua đây divđể tôi có thể nhấp vào các yếu tố cơ bản.
Câu trả lời:
Vâng, bạn CÓ THỂ làm điều này.
Sử dụng pointer-events: nonecùng với các câu lệnh điều kiện CSS cho IE11 (không hoạt động trong IE10 trở xuống), bạn có thể nhận được giải pháp tương thích trình duyệt chéo cho vấn đề này.
Sử dụng AlphaImageLoader, bạn thậm chí có thể đặt .PNG/.GIFs trong suốt trong lớp phủ divvà có các nhấp chuột chảy qua các phần tử bên dưới.
CSS:
pointer-events: none;
background: url('your_transparent.png');IE11 có điều kiện:
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;Đây là một trang ví dụ cơ bản với tất cả các mã.
Cũng rất vui được biết ...
Bạn có thể vô hiệu hóa các sự kiện con trỏ trong một phần tử cha (có thể là div trong suốt) nhưng nó vẫn được bật cho các phần tử con của nó.
Điều này rất hữu ích nếu bạn làm việc với nhiều lớp div chồng chéo, nơi bạn muốn có thể nhấp vào các phần tử con, trong khi các lớp cha không phản ứng với bất kỳ sự kiện chuột nào.
Đối với điều này, tất cả các div cha mẹ đều nhận được pointer-events: nonevà những đứa trẻ có thể nhấp của nó nhận được các sự kiện con trỏ được kích hoạt bởipointer-events: auto
.parent {
pointer-events:none;
}
.child {
pointer-events:auto;
}
<div class="some-container">
<ul class="layer-0 parent">
<li class="click-me child"></li>
<li class="click-me child"></li>
</ul>
<ul class="layer-1 parent">
<li class="click-me-also child"></li>
<li class="click-me-also child"></li>
</ul>
</div>Việc cho phép người dùng nhấp qua divphần tử bên dưới tùy thuộc vào trình duyệt. Tất cả các trình duyệt hiện đại, bao gồm Firefox, Chrome, Safari và Opera, đều hiểu pointer-events:none.
Đối với IE, nó phụ thuộc vào nền. Nếu nền trong suốt, nhấp chuột hoạt động mà không cần bạn phải làm gì. Mặt khác, đối với một cái gì đó như background:white; opacity:0; filter:Alpha(opacity=0);, IE cần chuyển tiếp sự kiện thủ công.
Xem một bài kiểm tra JSFiddle và các sự kiện con trỏ CanIUse .
Tôi đang thêm câu trả lời này vì tôi không thấy nó đầy đủ ở đây. Tôi đã có thể làm điều này bằng cách sử dụng phần tửFromPoint. Nên về cơ bản:
var range-selector= $("")
.css("position", "absolute").addClass("range-selector")
.appendTo("")
.click(function(e) {
_range-selector.hide();
$(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
});Trong trường hợp của tôi, lớp phủ div được định vị hoàn toàn, tôi không chắc điều này có làm nên sự khác biệt không. Điều này hoạt động trên IE8 / 9, Safari Chrome và Firefox ít nhất.
$('#elementontop').click(e => {
$('#elementontop').hide();
$(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
$('#elementontop').show();
});$('#elementontop)nên $('#elementontop')?
Tôi cần phải làm điều này và quyết định đi theo con đường này:
$('.overlay').click(function(e){
var left = $(window).scrollLeft();
var top = $(window).scrollTop();
//hide the overlay for now so the document can find the underlying elements
$(this).css('display','none');
//use the current scroll position to deduct from the click position
$(document.elementFromPoint(e.pageX-left, e.pageY-top)).click();
//show the overlay again
$(this).css('display','block');
});Tôi hiện đang làm việc với bóng bay lời nói vải. Nhưng vì khinh khí cầu với con trỏ được bọc trong div, một số liên kết bên dưới nó không thể nhấp nữa. Tôi không thể sử dụng extjs trong trường hợp này. Xem ví dụ cơ bản cho hướng dẫn về bài phát biểu của tôi yêu cầu HTML5
Vì vậy, tôi quyết định thu thập tất cả các tọa độ liên kết từ bên trong bóng bay trong một mảng.
var clickarray=[];
function getcoo(thatdiv){
thatdiv.find(".link").each(function(){
var offset=$(this).offset();
clickarray.unshift([(offset.left),
(offset.top),
(offset.left+$(this).width()),
(offset.top+$(this).height()),
($(this).attr('name')),
1]);
});
}Tôi gọi chức năng này trên mỗi quả bóng (mới). Nó nắm lấy tọa độ của các góc trái / trên và phải / xuống của một link. Class - ngoài ra còn có thuộc tính tên để làm gì nếu ai đó nhấp vào tọa độ đó và tôi rất thích đặt 1 có nghĩa là nó không được bấm máy bay phản lực . Và chuyển mảng này sang clickarray. Bạn có thể sử dụng đẩy quá.
Để làm việc với mảng đó:
$("body").click(function(event){
event.preventDefault();//if it is a a-tag
var x=event.pageX;
var y=event.pageY;
var job="";
for(var i in clickarray){
if(x>=clickarray[i][0] && x<=clickarray[i][2] && y>=clickarray[i][1] && y<=clickarray[i][3] && clickarray[i][5]==1){
job=clickarray[i][4];
clickarray[i][5]=0;//set to allready clicked
break;
}
}
if(job.length>0){
// --do some thing with the job --
}
});Hàm này chứng minh tọa độ của một sự kiện nhấp chuột cơ thể hoặc liệu nó đã được nhấp và trả về thuộc tính tên. Tôi nghĩ rằng không cần thiết phải đi sâu hơn, nhưng bạn thấy nó không phải là phức tạp. Hy vọng đã được ...
Nó không hoạt động theo cách đó. công việc xung quanh là kiểm tra thủ công tọa độ của nhấp chuột so với khu vực chiếm đóng của từng thành phần.
khu vực bị chiếm bởi một phần tử có thể được tìm thấy bởi 1. lấy vị trí của phần tử ở phía trên bên trái của trang và 2. chiều rộng và chiều cao. một thư viện như jQuery làm cho điều này khá đơn giản, mặc dù nó có thể được thực hiện trong js đơn giản. thêm một xử lý sự kiện cho mousemovetrên documentđối tượng sẽ cung cấp thông tin cập nhật liên tục của vị trí chuột từ trên và bên trái của trang. quyết định xem chuột có vượt qua bất kỳ đối tượng cụ thể nào hay không bao gồm kiểm tra xem vị trí chuột có nằm giữa các cạnh trái, phải, trên và dưới của một phần tử hay không.
Không, bạn không thể nhấp vào 'thông qua' một yếu tố. Bạn có thể lấy tọa độ của nhấp chuột và cố gắng tìm ra phần tử nào bên dưới phần tử được nhấp, nhưng điều này thực sự tẻ nhạt đối với các trình duyệt không có document.elementFromPoint. Sau đó, bạn vẫn phải mô phỏng hành động nhấp chuột mặc định, điều này không nhất thiết là tầm thường tùy thuộc vào yếu tố bạn có dưới đó.
Vì bạn đã có một khu vực cửa sổ hoàn toàn trong suốt, có lẽ bạn nên triển khai nó thành các phần tử viền riêng biệt ở bên ngoài, để khu vực trung tâm không bị tắc nghẽn để bạn thực sự có thể chỉ cần nhấp thẳng vào.
Một ý tưởng khác để thử (theo tình huống) sẽ là:
Có suy nghĩ gì không?
Tôi nghĩ rằng bạn có thể xem xét thay đổi đánh dấu của bạn. Nếu tôi không sai, bạn muốn đặt một lớp vô hình phía trên tài liệu và đánh dấu vô hình của bạn có thể ở trước hình ảnh tài liệu của bạn (điều này có đúng không?).
Thay vào đó, tôi đề nghị bạn nên đặt vô hình ngay sau ảnh tài liệu nhưng thay đổi vị trí thành tuyệt đối.
Lưu ý rằng bạn cần một yếu tố cha mẹ để có vị trí: tương đối và sau đó bạn sẽ có thể sử dụng ý tưởng này. Nếu không, lớp tuyệt đối của bạn sẽ được đặt ở góc trên cùng bên trái.
Một phần tử vị trí tuyệt đối được định vị so với phần tử cha đầu tiên có vị trí không phải là tĩnh. Nếu không tìm thấy phần tử nào như vậy, khối chứa là html
Hi vọng điêu nay co ich. Xem ở đây để biết thêm thông tin về định vị CSS.
Chỉ cần bọc athẻ xung quanh tất cả các trích xuất HTML, ví dụ
<a href="/categories/1">
<img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
<div class="caption bg-orange">
<h2>
test1
</h2>
</div>
</a>trong ví dụ của tôi, lớp chú thích của tôi có các hiệu ứng di chuột, với các sự kiện con trỏ: none; bạn sẽ thua
gói nội dung sẽ giữ hiệu ứng di chuột của bạn và bạn có thể nhấp vào tất cả các hình ảnh, bao gồm div, liên quan!
Một cách dễ dàng hơn là nội tuyến ảnh nền trong suốt bằng cách sử dụng URI dữ liệu như sau:
.click-through {
pointer-events: none;
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}Đây không phải là một câu trả lời chính xác cho câu hỏi nhưng có thể giúp tìm ra cách giải quyết cho nó.
Tôi đã có một hình ảnh tôi đang ẩn khi tải trang và hiển thị khi chờ cuộc gọi AJAX sau đó ẩn đi một lần nữa ...
Tôi tìm thấy cách duy nhất để hiển thị hình ảnh của mình khi tải trang sau đó làm cho nó biến mất và có thể nhấp vào những thứ mà hình ảnh được đặt trước khi ẩn nó là đặt hình ảnh vào DIV, tạo kích thước của DIV 10x10 pixel hoặc nhỏ đủ để ngăn chặn nó gây ra sự cố sau đó ẩn div chứa. Điều này cho phép hình ảnh tràn qua div khi nhìn thấy và khi div bị ẩn, chỉ có khu vực div bị ảnh hưởng do không thể nhấp vào các đối tượng bên dưới và không phải toàn bộ kích thước của hình ảnh mà DIV chứa và đang hiển thị.
Tôi đã thử tất cả các phương pháp để ẩn hình ảnh bao gồm CSS display = none / block, opacity = 0, ẩn hình ảnh với hidden = true. Tất cả chúng đều dẫn đến hình ảnh của tôi bị ẩn đi nhưng khu vực mà nó được hiển thị để hoạt động giống như có một lớp phủ bên dưới những thứ nhấp chuột và cứ thế không tác động lên các vật thể bên dưới. Khi hình ảnh nằm trong một DIV nhỏ bé và tôi giấu DIV nhỏ bé, toàn bộ khu vực bị chiếm giữ bởi hình ảnh rõ ràng và chỉ có khu vực nhỏ bé dưới DIV tôi giấu bị ảnh hưởng nhưng khi tôi làm cho nó đủ nhỏ (10 x 10 pixel), vấn đề đã được sửa chữa (loại).
Tôi thấy đây là một cách giải quyết bẩn thỉu cho những gì nên là một vấn đề đơn giản nhưng tôi không thể tìm ra cách nào để ẩn đối tượng ở định dạng gốc mà không có thùng chứa. Đối tượng của tôi là ở dạng vv Nếu có ai có cách tốt hơn, xin vui lòng cho tôi biết.