Click through div To based elements

Tak, możesz zmusić nakładające się warstwy do przechodzenia przez (ignorowania) zdarzenia kliknięć.
PLUS ty możesz mieć określone dzieci wyłączone z tego zachowania...

pointer-events wpływa na reakcję na zdarzenia kliknięcia, dotknięcia, przewijania i najechania kursorem.

W warstwie, która powinna ignorować / przechodzić wymienione zdarzenia ustawiasz

pointer-events: none; 

Dzieci tej Nie reagującej warstwy, które muszą reagować myszką / stuknięciem events again need:

pointer-events: auto; 

Ta druga część jest bardzo pomocna, jeśli pracujesz z wieloma nakładającymi się na siebie warstwami div (prawdopodobnie niektórzy rodzice są przezroczyści), gdzie musisz być w stanie kliknąć na elementy potomne i tylko te elementy potomne.

Przykład użycia:

    <style>
        .parent {
            pointer-events:none;        
        }
        .child {
            pointer-events:auto;
        }
    </style>
    
    <div class="parent">
      <a href="#">I'm unresponsive</a>
      <a href="#" class="child">I'm clickable again, wohoo !</a>
    </div>

Umożliwienie użytkownikowi kliknięcia przez div Na element bazowy zależy od przeglądarki. Wszystkie nowoczesne przeglądarki, w tym Firefox, Chrome, Safari i Opera, rozumieją pointer-events:none.

Dla IE, to zależy od tła. Jeśli tło jest przezroczyste, clickthrough działa bez konieczności robienia czegokolwiek. Z drugiej strony, dla czegoś takiego jak background:white; opacity:0; filter:Alpha(opacity=0);, IE wymaga ręcznego przekazywania zdarzeń.

Zobacz test JSFiddle i CanIUse pointer events .

Dodaję tę odpowiedź, ponieważ nie widziałem jej tutaj w całości. Udało mi się to zrobić za pomocą elementFromPoint. Więc w zasadzie:

• załącz kliknięcie do div, przez który chcesz zostać kliknięty
• Ukryj to
• określ, na jakim elemencie znajduje się wskaźnik
• odpalaj klikając na element.

var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

        $(document.elementFromPoint(e.clientX,e.clientY)).trigger("click");
    });

W moim przypadku nakładka div jest absolutnie ustawiona-nie jestem pewien, czy to robi różnicę. Działa na IE8/ 9, Safari Chrome i Firefox w najmniej.

1. Ukryj nakładkę na element
2. wyznacz współrzędne kursora
3. Get element on these coordinates
4. Trigger click on element
5. Pokaż ponownie element nakładający

$('#elementontop').click(e => {
    $('#elementontop').hide();
    $(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
    $('#elementontop').show();
});

Musiałem to zrobić i zdecydowałem się na tą trasę:

$('.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');
});

Obecnie pracuję z balonami mowy canvas. Ale ponieważ balon ze wskaźnikiem jest zawinięty w div, Niektóre linki pod nim nie są już w stanie kliknąć. Nie mogę używać extjs w tym przypadku. Zobacz podstawowy przykład tutoriala my speech balloon wymaga HTML5

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]);
                                     });
         }

Wywołuję tę funkcję na każdym (nowym) balonie. Chwyta współrzędne lewego/górnego i prawego / dolnego rogu linku.class-dodatkowo atrybut name do tego co zrobić jak ktoś kliknie w te współrzędne a ja lubiłem ustawiać 1 co oznacza że nie został kliknięty. I odłącz tę tablicę do clickarray. Ty też możesz popchnąć.

Do pracy z tą tablicą:

$("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 --
            }
          });

Ta funkcja sprawdza współrzędne zdarzenia body click lub czy zostało ono już kliknięte i zwraca atrybut name. Myślę, że nie jest konieczne wchodzenie głębiej, ale widzicie, że to nie jest takie skomplikowane. Nadzieja in was enlish...

Nie, Nie można kliknąć "przez" element. Możesz uzyskać współrzędne kliknięcia i spróbować ustalić, który element znajdował się pod klikniętym elementem, ale jest to naprawdę uciążliwe dla przeglądarek, które nie mają document.elementFromPoint. Następnie nadal musisz emulować domyślną akcję klikania, która niekoniecznie jest trywialna w zależności od tego, jakie elementy masz pod nimi.

Ponieważ masz w pełni przezroczysty obszar okna, prawdopodobnie lepiej będzie zaimplementować go jako oddzielną ramkę elementy na zewnątrz, pozostawiając obszar środkowy wolny od przeszkód, dzięki czemu można naprawdę po prostu kliknąć prosto.

Innym pomysłem na spróbowanie (sytuacyjnie) byłoby:

1. Umieść żądaną treść w div;
2. Umieść nieklikającą nakładkę na całą stronę z indeksem z wyższym,
3. Zrób kolejną kopię oryginalnego div
4. nakładka i abs umieszczają copy div w tym samym miejscu co oryginalna treść, którą chcesz kliknąć Z jeszcze wyższym indeksem z?

Jakieś pomysły?

Po prostu zawiń znacznik a wokół całego wyciągu HTML, na przykład

<a href="/categories/1">
  <img alt="test1" class="img-responsive" src="/assets/photo.jpg" />
  <div class="caption bg-orange">
    <h2>
      test1
    </h2>
  </div>
</a>

W moim przykładzie moja klasa podpisów ma efekty hover, że z pointer-events:none; po prostu przegrasz

Owijanie zawartości zachowa efekty hover i możesz kliknąć na wszystkie zdjęcia, div w tym, pozdrawiam!

To tak nie działa. obejście polega na ręcznym sprawdzeniu współrzędnych kliknięcia myszką na obszarze zajmowanym przez każdy element.

Obszar zajmowany przez element można znaleźć przez 1. uzyskanie lokalizacji elementu w odniesieniu do lewego górnego rogu strony, oraz 2. szerokość i wysokość. biblioteka taka jak jQuery sprawia, że jest to dość proste, chociaż można to zrobić w zwykłym js. dodanie obsługi zdarzenia dla mousemove Na obiekcie document zapewni ciągłe aktualizacje pozycja myszy od góry i po lewej stronie strony. decydowanie, czy kursor znajduje się nad danym obiektem, polega na sprawdzaniu, czy kursor znajduje się między lewą, prawą, górną i dolną krawędzią elementu.

Myślę, że możesz rozważyć zmianę znaczników. Jeśli się nie mylę, chcesz umieścić niewidoczną warstwę nad dokumentem, a niewidoczne znaczniki mogą być poprzedzające obraz dokumentu (czy to prawda?).

Zamiast tego proponuję umieścić niewidoczny zaraz po obrazie dokumentu, ale zmieniając pozycję na absolutną.

Zauważ, że potrzebujesz elementu nadrzędnego, aby mieć position: relative i wtedy będziesz mógł użyć tego pomysłu. W przeciwnym razie twoja warstwa absolutna zostanie umieszczony tylko w lewym górnym rogu.

Element pozycji bezwzględnej jest umieszczony względem pierwszego rodzica element, który ma inną pozycję niż statyczna. Jeśli taki element nie zostanie znaleziony, blok zawierający to html

Mam nadzieję, że to pomoże. Zobacz tutaj aby uzyskać więcej informacji na temat pozycjonowania CSS.

Myślę, że event.stopPropagation(); należy również wspomnieć tutaj. Dodaj to do funkcji klikania przycisku.

zapobiega przedostawaniu się zdarzenia do drzewa DOM, co uniemożliwia Powiadamianie o zdarzeniu programów obsługi nadrzędnej.

Łatwiejszym sposobem byłoby wstawianie przezroczystego obrazu tła za pomocą Uri danych w następujący sposób:

.click-through {
    pointer-events: none;
    background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

Możesz umieścić nakładkę AP jak...

#overlay {
  position: absolute;
  top: -79px;
  left: -60px;
  height: 80px;
  width: 380px;
  z-index: 2;
  background: url(fake.gif);
}

<div id="overlay"></div>

Po prostu umieścić go tam, gdzie nie chcesz ie cliped. Działa we wszystkich.

Nie jest to dokładna odpowiedź na pytanie, ale może pomóc w znalezieniu obejścia problemu.

Miałem obraz, który ukrywałem podczas ładowania strony i wyświetlania podczas oczekiwania na wywołanie AJAX, a następnie ponownie się ukrywałem...

Znalazłem jedyny sposób, aby wyświetlić mój obraz podczas ładowania strony, a następnie sprawiają, że znikają i być w stanie kliknąć rzeczy, w których obraz znajdował się przed ukryciem było umieścić obraz w DIV, aby Rozmiar DIV 10x10 pikseli lub wystarczająco mały, aby zapobiec powodowanie problemu, a następnie ukrywanie zawierającego div. To pozwoliło obrazowi przepełnić div, gdy był widoczny, a gdy div był ukryty, tylko obszar div był dotknięty niemożnością kliknięcia obiektów poniżej, a nie całym rozmiarem obrazu, który div zawierał i wyświetlał.

Próbowałem wszystkich metod, aby ukryć obraz, w tym CSS display = none / block,krycie = 0, Ukrywanie obrazu za pomocą hidden = true. Wszystkie sprawiły, że mój obraz był ukryty, ale obszar, w którym był wyświetlany zachowywać się tak, jakby była przykrywka nad rzeczami pod spodem, aby kliknięcia i tak dalej nie działały na podstawowe obiekty. Gdy obraz był wewnątrz małego DIV i ukryłem mały DIV, cały obszar zajmowany przez obraz był wyraźny i tylko mały obszar pod DIV, który ukryłem, został dotknięty, ale ponieważ zrobiłem go wystarczająco mały (10x10 pikseli), problem został rozwiązany (jakby).

Uznałem to za brudne obejście, co powinno być prostym problemem, ale nie byłem w stanie znaleźć sposobu, aby ukryć obiekt w natywnym formacie bez kontenera. Mój przedmiot był w formie itp. Jeśli ktoś ma lepszy sposób, proszę dać mi znać.

Nie mogłem zawsze używać pointer-events: none w moim scenariuszu, ponieważ chciałem, aby zarówno nakładka , jak i element(Y) bazowy (e) były klikalne / wybierane.

Struktura DOM wyglądała tak:

<div id="outerElement">
   <div id="canvas-wrapper">
      <canvas id="overlay"></canvas>
   </div>
   <!-- Omitted: element(s) behind canvas that should still be selectable -->
</div>

(The outerElement, canvas-wrapper i canvas elementy mają ten sam rozmiar.)

Aby elementy znajdujące się za kanwą działały normalnie (np. selectable, editable), użyłem następującego kodu:

canvasWrapper.style.pointerEvents = 'none';

outerElement.addEventListener('mousedown', event => {
    const clickedOnElementInCanvas = yourCheck // TODO: check if the event *would* click a canvas element.
    if (!clickedOnElementInCanvas) {

        // if necessary, add logic to deselect your canvas elements ...

        wrapper.style.pointerEvents = 'none';
        return true;
    }

    // Check if we emitted the event ourselves (avoid endless loop)
    if (event.isTrusted) {
        // Manually forward element to the canvas
        const mouseEvent = new MouseEvent(event.type, event);
        canvas.dispatchEvent(mouseEvent);
        mouseEvent.stopPropagation();
    }
    return true;
});

Niektóre obiekty canvas również były wyposażone w pola wejściowe, więc musiałem zezwolić również zdarzenia klawiatury. Aby to zrobić, musiałem zaktualizować właściwość pointerEvents w zależności od tego, czy pole wejściowe canvas było aktualnie skupione, czy nie:

onCanvasModified(canvas, () => {
    const inputFieldInCanvasActive = // TODO: Check if an input field of the canvas is active.
    wrapper.style.pointerEvents = inputFieldInCanvasActive  ? 'auto' : 'none';
});