Câu hỏi Nhấp qua DIV đến các phần tử cơ bản


tôi có một div cái đó có background:transparent, cùng với border. Bên dưới cá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 vào bên ngoài lớp phủ div. Tuy nhiên, tôi không thể nhấp vào các phần 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 div để tôi có thể nhấp vào các yếu tố cơ bản.

My Problem


1236
2017-09-09 20:42


gốc




Các câu trả lời:


Vâng, bạn CÓ THỂ làm cái này.

Sử dụng pointer-events: none cùng với các câu lệnh điều kiện CSS cho IE11 (không hoạt động trong IE10 hoặc thấp hơn), bạn có thể nhận được một 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 trong suốt .PNG/.GIFs trong lớp phủ div và có lần nhấp 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à trang mẫu cơ bản với tất cả các mã.


2127
2018-01-29 21:49



Tôi không thể có được trang ví dụ để làm việc trong IE 9 ở tất cả, cho dù chế độ tiêu chuẩn hoặc chế độ tương thích. Dường như IE 9 hỗ trợ pointer-events:none nhưng các tài liệu tuyên bố nó chỉ dành cho các yếu tố SVG. - Andy E
Nó có thể không phải là một việc lớn tùy thuộc vào ứng dụng / đối tượng nhưng các sự kiện con trỏ không xuất hiện để làm việc trong Opera: developer.mozilla.org/en/CSS/pointer-events - nheinrich
Tôi không hoàn toàn hiểu được điểm cố gắng sử dụng điều này trong IE9. IE9 vượt qua các sự kiện thông qua các div trong suốt. Trong thực tế, nhiều lần tôi đã phải background-màu một div tại opacity: 0,01 để có được IE9 để ngăn chặn đi qua các sự kiện chuột thông qua nó. Vì vậy, giải pháp sẽ chỉ cần trên các trình duyệt khác, phải không? - maulkye
IE10 không hỗ trợ các bộ lọc hoặc các sự kiện con trỏ. Đáng buồn thay, đây không còn là giải pháp khả thi. Thật là sự xấu hổ. - superluminary
IE11 hỗ trợ đầy đủ các sự kiện con trỏ. Điều này có nghĩa là tất cả các trình duyệt hiện đại đều hỗ trợ nó. Đây là giải pháp khả thi vào cuối năm 2014. caniuse.com/#search=pointer-events - Judah Himango


Cũng rất hay 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ó lẽ là div trong suốt) nhưng nó vẫn được kích hoạt cho các phần tử con của nó.
Điều này 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 trên bất kỳ sự kiện chuột nào cả. Đối với tất cả các div cha mẹ này nhận được pointer-events: none và các trẻ em có thể nhấp của nó nhận được sự kiện con trỏ được bật lại bởi pointer-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>

187
2017-11-07 11:06



cảm ơn vì sự bổ sung hữu ích nhất này! - henon


Nhấp qua DIV đến phần tử cơ bản hoạt động khác trong trình duyệt. Opera cần chuyển tiếp sự kiện thủ công, Firefox và Chrome hiểu CSS pointer-events:none; và IE không cần bất cứ điều gì với nền trong suốt; với ví dụ background:white; opacity:0; filter:Alpha(opacity=0); IE cần chuyển tiếp như Opera.

Xem thử nghiệm chuyển tiếp tại http://jsfiddle.net/vovcat/wf25Q/1/ và http://caniuse.com/pointer-events. Thuộc tính CSS con trỏ-sự kiện đã được di chuyển từ CSS3-UI sang CSS4-UI.


37
2017-10-16 17:26





Tôi đang thêm câu trả lời này bởi 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 elementFromPoint. Nên về cơ bản:

  • đính kèm một nhấp chuột vào div bạn muốn được nhấp qua
  • giấu nó đi
  • xác định yếu tố con trỏ đang bật
  • kích vào phần tử ở đó.
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, div xếp chồng hoàn toàn được định vị - tôi không chắc liệu điều này có tạo nên sự khác biệt hay không. Điều này hoạt động trên IE8 / 9, Safari Chrome và Firefox ít nhất.


16
2018-05-16 17:25



Tôi thích giải pháp này! Tôi chỉ ước chúng ta có thể nhận được một phần tử từ tọa độ x, y trong khi bỏ qua một hoặc nhiều phần tử, thay vì phải ẩn chúng. - Luke


  1. Ẩn lớp phủ phần tử
  2. Xác định tọa độ con trỏ
  3. Lấy phần tử trên các tọa độ đó
  4. Kích hoạt click vào yếu tố
  5. Hiển thị lại phần tử lớp phủ

    $ ('# elementontop) .click (hàm (e) {
        $ ('# elementontop) .hide ();
        $ (document.elementFromPoint (e.clientX, e.clientY)). trigger ("bấm");
        $ ('# elementontop'). hiển thị ();
    });


11
2018-02-20 20:04



Đây là giải pháp của tôi, tôi tự hỏi làm thế nào để quản lý để sử dụng con trỏ: con trỏ trên các yếu tố clicable được dưới, bất kỳ sugestion? - Macumbaomuerte


Tôi cần 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');
});

6
2017-07-11 19:29



Bạn là một huyền thoại - Sam Gurdus


Tôi hiện đang làm việc với bong bóng lời nói canvas. Nhưng vì quả bóng với con trỏ được bọc trong một div, một số liên kết dưới nó không thể nhấp được 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ề bong bóng lời nói 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 các bong bóng 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 hàm này trên mỗi bóng mới. Nó lấy tọa độ của các góc trái / trên và phải / xuống của một lớp liên kết.class - bổ sung thuộc tính name cho những gì cần làm nếu ai đó nhấp vào tọa độ đó và tôi thích đặt 1 có nghĩa là nó không được nhấp . Và unshift mảng này thành clickarray. Bạn cũng có thể sử dụng push.

Để 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 các tọa độ của một sự kiện nhấn cơ thể hoặc nó đã được nhấn và trả về thuộc tính name. Tôi nghĩ rằng nó không phải là cần thiết để đ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 enlish ...


5
2018-01-09 13:36





nó không hoạt động theo cách đó. công việc xung quanh là tự kiểm tra các tọa độ của click chuột vào khu vực bị chiếm đóng bởi mỗi phần tử.

khu vực chiếm đóng bởi một yếu tố có thể tìm thấy được tìm thấy bởi 1. nhận được vị trí của các yếu tố liên quan đến 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 các js đơn giản. thêm một trình xử lý sự kiện cho mousemove trên document đối tượng sẽ cung cấp cập nhật liên tục vị trí chuột từ trên cùng và bên trái của trang. quyết định nếu chuột trên bất kỳ đối tượng cụ thể nào bao gồm việc 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 phần tử hay không.


4
2017-09-09 20:45



Hãy suy nghĩ bạn có thể giải thích thêm một chút về việc xác định khu vực bị chiếm đóng bởi một yếu tố? Cảm ơn - Ryan
Như đã đề cập ở trên, bạn có thể đạt được điều này bằng cách sử dụng CSS {pointer-events: none;} trên vùng chứa trong suốt của bạn. - Empereol


Một ý tưởng khác để thử (tình huống) sẽ là:

  1. Đặt nội dung bạn muốn trong div;
  2. Đặt lớp phủ không nhấp vào toàn bộ trang với chỉ mục z cao hơn,
  3. tạo một bản sao cắt của div gốc
  4. lớp phủ và vị trí abs div sao chép trong cùng một vị trí như nội dung ban đầu bạn muốn có thể nhấp được với chỉ mục z cao hơn nữa?

Có suy nghĩ gì không?


3
2018-02-26 22:32



Điều này đôi khi là giải pháp đa trình duyệt đơn giản nhất. Thậm chí bạn có thể thêm lớp vào bất kỳ thứ gì cần phải nhấp và sau đó lặp lại thông qua sao chép các mục đó trong jquery khi tải trang - koosa


Không, bạn không thể nhấp vào ‘qua’ một phần tử. Bạn có thể nhận được tọa độ của nhấp chuột và cố gắng tìm ra yếu tố nào nằm 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 phải tùy thuộc vào những yếu tố bạn có trong đó.

Vì bạn đã có một khu vực cửa sổ trong suốt, có thể bạn nên thực hiện tốt hơn nó như các phần tử biên giới riêng biệt xung quanh bên ngoài, để lại khu vực trung tâm không bị cản trở để bạn có thể thực sự chỉ cần nhấp thẳng.


2
2017-09-09 21:27



Bị bỏ rơi vì không có lý do gì. Nó chính xác - Bạn không thể có được trình duyệt chéo đúng cách này nếu không (Opera không hoạt động chẳng hạn, cũng như không làm phiên bản cũ hơn một chút của các trình duyệt không phải IE khác). - Jani Hartikainen


chỉ cần bọc một thẻ của bạn xung quanh tất 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ó hiệu ứng di chuột, với pointer-events: none; bạn sẽ mất

gói nội dung sẽ giữ các 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, Trân trọng!


2
2018-02-16 21:28