HTML "lớp phủ" cho phép các nhấp chuột rơi qua các phần tử đằng sau nó

149

Tôi đang cố gắng che phủ phần tử ở đầu trang web (để vẽ đồ họa tùy ý) và tôi đã đến điểm tôi có thể xếp bên trong của một yếu tố trên đầu trang của tất cả mọi thứ, nhưng điều này ngăn cản người dùng nhấp vào bất kỳ liên kết/nút/etc. Có cách nào để nội dung của nó nổi lên trên mọi thứ (nó bán trong suốt, vì vậy bạn vẫn có thể thấy những gì đằng sau) và có người dùng tương tác với lớp bên dưới không?HTML "lớp phủ" cho phép các nhấp chuột rơi qua các phần tử đằng sau nó

Tôi đã tìm thấy rất nhiều thông tin về mô hình sự kiện DOM, nhưng không có thông tin nào giải quyết vấn đề nơi các nút và các điều khiển "gốc" khác dường như không nhận được các nhấp chuột ở vị trí đầu tiên.

Nguồn

2009-09-09 Steven Schlansker

Xem thêm:. Http://stackoverflow.com/questions/3015422/forwarding-mouse-events-through-layers-divs/11935377 – kitchin

'$ ("div") click (function (e) { e.preventDefault();}); 'Tôi sử dụng hầu hết các lần –

Bạn có thể sử dụng một lớp phủ với opacity thiết lập để các nút/neo ở phía sau lại có thể nhìn thấy, nhưng một khi bạn đã có lớp phủ trên một phần tử, bạn không thể nhấp vào nó.

Nguồn

2009-09-09 19:44:55 yoda

Tôi nghĩ rằng nếu lớp phủ trong suốt (như không có nền, một hình ảnh trong suốt làm nền sẽ không hoạt động), các nhấp chuột sẽ bị xóa. Tôi không chắc chắn nếu điều này làm việc cho tất cả các trình duyệt mặc dù. – mbillard

Đúng, vì đây là cách nhấp chuột xảy ra (iframe toàn màn hình trong suốt nằm trên đầu trang). –

Nói chung, đây không phải là một ý tưởng tuyệt vời. Lấy kịch bản của bạn, nếu bạn có ý định xấu xa, bạn có thể ẩn mọi thứ bên dưới "lớp phủ" của bạn. Sau đó, khi người dùng nhấp vào liên kết họ nghĩ họ nên đưa họ đến bankofamerica.com, thay vào đó nó kích hoạt liên kết ẩn đưa họ đến myevilsite.com.

Điều đó nói rằng, sự kiện bubbling hoạt động, và nếu nó trong một ứng dụng, nó không phải là một việc lớn. Đoạn mã sau là một ví dụ. Nhấp vào khu vực màu xanh bật lên một cảnh báo, ngay cả khi cảnh báo được đặt trên khu vực màu đỏ. Lưu ý rằng vùng màu da cam KHÔNG hoạt động, vì sự kiện sẽ lan truyền qua các phần tử PARENT, vì vậy lớp phủ của bạn cần phải là bên trong bất kỳ yếu tố nào bạn đang quan sát các nhấp chuột. Trong kịch bản của bạn, bạn có thể không may mắn.

<html> 
<head> 
</head> 
<body> 
    <div id="outer" style="position:absolute;height:50px;width:60px;z-index:1;background-color:red;top:5px;left:5px;" onclick="alert('outer')"> 
     <div id="nested" style="position:absolute;height:50px;width:60px;z-index:2;background-color:blue;top:15px;left:15px;"> 
     </div> 
    </div> 
    <div id="separate" style="position:absolute;height:50px;width:60px;z-index:3;background-color:orange;top:25px;left:25px;"> 
    </div> 
</body> 
</html>

Nguồn

2009-09-09 19:59:08 jvenema

"Lấy kịch bản của bạn, nếu bạn có ý định xấu xa, bạn có thể ẩn mọi thứ bên dưới" lớp phủ "của bạn. Sau đó, khi người dùng nhấp vào liên kết họ nghĩ nên đưa họ đến bankofamerica.com, thay vào đó nó kích hoạt liên kết ẩn tới myevilsite.com. " - Điều đó thậm chí không có ý nghĩa. Tại sao anh ta cần phải đi đến rắc rối. Anh ta chỉ có thể sử dụng js để đến đó, tại sao anh ta cần phải kích hoạt một liên kết ẩn? –

Không có ý định xấu xa ở đây! Điều này là nghiêm chỉnh trong nhà; nó chỉ thực sự có để làm việc trên một trong những Safari hoặc Firefox trên chính xác một máy tính :) Tôi không quan tâm gì về tính di động tại thời điểm này. Ý tưởng của bạn thú vị, nhưng nó yêu cầu lồng trong phần tử - không hoạt động cho những thứ như nút biểu mẫu hoặc liên kết, là trường hợp sử dụng tôi đã mô tả trong bài đăng gốc :( –

@Steven, tôi biết, đó là lý do Tôi đã đề cập rằng tôi nghĩ rằng bạn không may mắn về cách tiếp cận đó. @Russell, nếu bạn cân nhắc rằng bạn có thể có người dùng thực hiện các hành động mà họ không biết, bạn có thể thực hiện những việc như bắt đầu chuyển hướng các sự kiện bàn phím, v.v., cho phép bạn nhập tên tệp để tải lên, v.v. . Đây là một vấn đề lớn với flash không lâu trước đây, bởi vì không biết nó, bạn có thể bật webcam flash của bạn và/hoặc điều khiển âm thanh và gửi âm thanh/video mà không nhận ra nó. – jvenema

Đề xuất của tôi là bạn có thể nắm bắt sự kiện nhấp chuột với lớp phủ, ẩn lớp phủ, sau đó hiển thị lại lớp phủ. Tôi không chắc chắn nếu bạn muốn có được một hiệu ứng nhấp nháy mặc dù.

[Cập nhật] Chính xác vấn đề này và chính xác giải pháp của tôi chỉ xuất hiện trong bài viết này: "Forwarding Mouse Events Through Layers". Tôi biết nó có thể là một chút muộn cho OP, nhưng vì lợi ích của ai đó có vấn đề này trong tương lai, tôi mặc dù tôi sẽ bao gồm nó.

Nguồn

2009-09-09 19:59:21

Liên kết bạn cung cấp thật tuyệt vời. Đặc biệt, nó cho phép tôi tìm hiểu về thuộc tính "con trỏ-sự kiện" của Mozilla thực hiện chính xác thủ thuật. http://hacks.mozilla.org/2009/12/pointer-events-for-html-in-firefox-3-6/ – NicDumZ

+12

Về cơ bản, bạn cần thêm 'pointer-events: none;' CSS vào phần tử ở trên nó là "vô hình" đối với các sự kiện. – lepe

@lepe: <3 Tất cả các biến chứng này, khi tất cả những gì thực sự cần thiết là giải pháp ngắn gọn tuyệt vời của bạn. – VSO

Trong trường hợp bất cứ ai khác đang chạy vào cùng một vấn đề, giải pháp duy nhất tôi có thể thấy rằng hài lòng với tôi là để có vải che tất cả mọi thứ và sau đó để nâng cao Z-index của tất cả các yếu tố có thể click. Bạn không thể vẽ lên chúng, nhưng ít nhất chúng có thể nhấp được ...

Nguồn

2009-09-12 10:11:38

Để ghi lại một cách tiếp cận khác có thể là tạo lớp phủ có thể nhấp vào lớp phủ: bạn làm cho lớp phủ trong suốt và sau đó đặt "lớp phủ" hình ảnh phía sau nó (hơi ngược lại, hình ảnh "lớp phủ" sau đó có thể mờ đục). Tùy thuộc vào những gì bạn đang cố gắng làm, bạn cũng có thể có được hiệu ứng hình ảnh giống hệt nhau (của một hình ảnh và một lớp có thể nhấp được bán trong suốt chồng lên nhau), trong khi tránh các vấn đề về khả năng nhấp (vì "lớp phủ" "thực tế là ở chế độ nền).

Nguồn

2009-11-09 18:12:09

Làm thế nào về vấn đề này cho IE ?:

onmousedown: Ẩn tất cả các yếu tố mà có thể che phủ sự kiện này. Bởi vì hiển thị: không có khả năng hiển thị: ẩn không thực sự hoạt động, đẩy div xếp chồng ra khỏi màn hình cho số pixel cố định. Sau khi trì hoãn, hãy đẩy lùi div xếp chồng với cùng số pixel.

onmouseup: Trong khi đó đây là sự kiện bạn muốn kích hoạt.

 //script 
    var allclickthrough=[];   
    function hidedivover(){ 
       if(allclickthrough.length==0){ 
       allclickthrough=getElementsByClassName(document.body,"clickthrough");// if so .parentNode 
       } 
       for(var i=0;i<allclickthrough.length;i++){ 
       allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)+2000+"px"; 
       } 
       setTimeout(function(){showdivover()},1000); 
       } 
    function showdivover(){ 
      for(var i=0;i<allclickthrough.length;i++){ 
       allclickthrough[i].style.left=parseInt(allclickthrough[i].style.left)-2000+"px"; 
       } 
      }  
    //html 
    <span onmouseup="Dreck_he_got_me()">Click me if you can.</span> 
    <div onmousedown="hidedivover()" style="position:absolute" class="clickthrough">You'll don't get through!</div>

Nguồn

2013-01-28 11:43:36

-2

Tôi gặp sự cố này khi xem trang web của mình trên điện thoại. Trong khi tôi đang cố gắng đóng lớp phủ, tôi đã nhấp vào bất kỳ thứ gì trong lớp phủ. Một giải pháp mà tôi tìm thấy đang làm việc cho bản thân mình là chỉ cần thêm a thẻ xung quanh toàn bộ lớp phủ

Nguồn

2013-12-29 21:56:04 stefanplc

Nhóm của tôi đã gặp sự cố này và giải quyết nó rất độc đáo.

thêm lớp "passthrough" hoặc thứ gì đó cho từng phần tử bạn muốn có thể nhấp và nằm trong lớp phủ.
cho mỗi phần tử ".passthrough" nối thêm một div và định vị nó chính xác ở trên cùng của phần tử gốc. thêm class "element-overlay" vào div mới này.
CSS ".element-overlay" phải có chỉ mục z cao (phía trên lớp phủ của trang) và các phần tử phải trong suốt.

Điều này sẽ giải quyết vấn đề của bạn khi sự kiện trên "lớp phủ lớp phủ" sẽ bong bóng lên đến ".passthrough". Nếu bạn vẫn còn có vấn đề (chúng tôi đã không thấy bất kỳ cho đến nay), bạn có thể chơi xung quanh với các ràng buộc.

Đây là tính năng nâng cao cho giải pháp @ jvenema.

Những điều tốt đẹp về việc này là

bạn không đi qua tất cả các sự kiện cho TẤT CẢ các yếu tố. Chỉ những cái bạn muốn. (giải quyết đối số của jvenema)
Tất cả các sự kiện sẽ hoạt động bình thường. (di chuột thí dụ).

Nếu bạn gặp bất kỳ sự cố nào, vui lòng cho tôi biết để tôi có thể xây dựng.

Nguồn

2014-01-14 12:40:56

Thú vị, nhưng tôi đoán tôi không thực sự hiểu. Tuy nhiên, nó đưa đến một ý tưởng khác: Làm cho lớp thực sự hoàn toàn trong suốt và đặt nó lên trên lớp phủ. Tạo một bản sao không trong suốt và đặt nó bên dưới. Tất cả các sự kiện được đảm bảo hoạt động, màn hình có thể bị sai nếu bản sao không đồng bộ. WDYT? – maaartinus

Một hack ngớ ngẩn mà tôi đã làm là đặt chiều cao của phần tử thành 0 nhưng tràn: hiển thị; kết hợp điều này với các sự kiện con trỏ: none; dường như bao gồm tất cả các căn cứ.

.overlay { 
    height:0px; 
    overflow:visible; 
    pointer-events:none; 
    background:none !important; 
}

Nguồn

2014-11-14 14:02:08

Tôi thích điều này - phù hợp với tôi miễn là lớp phủ hoàn toàn trong suốt, ví dụ: nếu nó chỉ được sử dụng để định vị một tin nhắn/nút/hình ảnh. – Tom

+24

Tôi không chắc tại sao đây không phải là câu trả lời được chấp nhận hoặc câu trả lời được đánh giá cao nhất. 'pointer-events: none' là câu trả lời chúng ta đang tìm kiếm ở đây. – cazzer

điên dễ dàng, cảm ơn! Hoạt động trên các yếu tố svg quá. –

HTML "lớp phủ" cho phép các nhấp chuột rơi qua các phần tử đằng sau nó

Trả lời

Các vấn đề liên quan