Вопрос: Нажмите DIV на базовые элементы


у меня есть divкоторый имеет background:transparent, вместе с border, Под этим div, У меня больше элементов.

В настоящее время я могу щелкнуть базовые элементы, когда я нажимаю за пределами наложения div, Тем не менее, я не могу щелкнуть основные элементы, когда вы нажимаете непосредственно на оверлей div,

Я хочу, чтобы иметь возможность divтак что я могу нажать на базовые элементы.

My Problem


1211


источник


Ответы:


Да ты МОЖНО сделай это.

С помощью pointer-events: noneнаряду с условными операторами CSS для IE11 (не работает в IE10 или ниже), вы можете получить решение, совместимое с браузером для этой проблемы.

С помощью AlphaImageLoader, вы можете даже поставить прозрачный .PNG/.GIFs в наложении divи клики проходят через элементы под ним.

CSS:

pointer-events: none;
background: url('your_transparent.png');

IE11 условный:

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='your_transparent.png', sizingMethod='scale');
background: none !important;

Вот базовая страница примера со всем кодом.


2094



Также приятно узнать ...
Вы можете отключить указатели-события в родительском элементе (возможно, прозрачном div), но он все еще разрешен для его дочерних элементов.
Это полезно, если вы работаете с несколькими перекрывающимися слоями div, где вы хотите иметь возможность нажимать дочерние элементы, в то время как родительские слои не реагируют на какие-либо события мыши вообще. Для этого все родительские divs получают pointer-events: noneи его интерактивные дети получают события-указатели, 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>

177



Щелчок через DIV на базовый элемент работает в браузерах. Opera нуждается в ручной переадресации событий, Firefox и Chrome понимают CSS pointer-events:none;и IE не нуждается ни в чем с прозрачным фоном; с. background:white; opacity:0; filter:Alpha(opacity=0);IE нуждается в переадресации, как Opera.

См. http://jsfiddle.net/vovcat/wf25Q/1/ а также http://caniuse.com/pointer-events , Свойство CSS-указателя-событий было перенесено из CSS3-UI в CSS4-UI.


37



Я добавляю этот ответ, потому что я не видел его здесь полностью. Я смог сделать это, используя elementFromPoint. Итак, в основном:

  • прикрепите клик к div, на который вы хотите нажать
  • скрыть
  • определить, на каком элементе указатель включен
  • стреляйте щелчком по элементу.
var range-selector= $("")
    .css("position", "absolute").addClass("range-selector")
    .appendTo("")
    .click(function(e) {
        _range-selector.hide();

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

В моем случае оверлейный div абсолютно позиционируется - я не уверен, что это имеет значение. Это работает как минимум на IE8 / 9, Safari Chrome и Firefox.


16



  1. Скрыть наложение элемента
  2. Определение координат курсора
  3. Получить элемент в этих координатах
  4. Триггерный щелчок по элементу
  5. Показать накладываемый элемент снова
$ ('# elementontop) .click (function (e) {
        $ ( '# Elementontop) .hide ();
        $ (document.elementFromPoint (e.clientX, e.clientY)). trigger («click»);
        $ ( '# Elementontop') шоу ().
    }); 

11



Мне нужно было это сделать и решил пойти по этому пути:

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



I currently work with canvas speech balloons. But because the balloon with the pointer is wrapped in a div, some links under it aren't click able anymore. I cant use extjs in this case. See basic example for my speech balloon tutorial requires HTML5

So I decided to collect all link coordinates from inside the balloons in an array.

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

I call this function on each (new) balloon. It grabs the coordinates of the left/top and right/down corners of a link.class - additionally the name attribute for what to do if someone clicks in that coordinates and I loved to set a 1 which means that it wasn't clicked jet. And unshift this array to the clickarray. You could use push too.

To work with that array:

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

This function proofs the coordinates of a body click event or whether it was already clicked and returns the name attribute. I think it is not necessary to go deeper, but you see it is not that complicate. Hope in was enlish...


5



it doesn't work that way. the work around is to manually check the coordinates of the mouse click against the area occupied by each element.

area occupied by an element can found found by 1. getting the location of the element with respect to the top left of the page, and 2. the width and the height. a library like jQuery makes this pretty simple, although it can be done in plain js. adding an event handler for mousemove on the document object will provide continuous updates of the mouse position from the top and left of the page. deciding if the mouse is over any given object consists of checking if the mouse position is between the left, right, top and bottom edges of an element.


4



Another idea to try (situationally) would be to:

  1. Put the content you want in a div;
  2. Put the non-clicking overlay over the entire page with a z-index higher,
  3. make another cropped copy of the original div
  4. overlay and abs position the copy div in the same place as the original content you want to be clickable with an even higher z-index?

Any thoughts?


3



Nope, you can't click ‘through’ an element. You can get the co-ordinates of the click and try to work out what element was underneath the clicked element, but this is really tedious for browsers that don't have document.elementFromPoint. Then you still have to emulate the default action of clicking, which isn't necessarily trivial depending on what elements you have under there.

Since you've got a fully-transparent window area, you'll probably be better off implementing it as separate border elements around the outside, leaving the centre area free of obstruction so you can really just click straight through.


2



just wrap your a tag around all the html extract, for example

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

in my example my caption class has hover effects, that with pointer-events:none; you just will lose

wrapping the content will keep your hover effects and you can click in all the picture, div included, regards!


2



I think that you can consider changing your markup. If I am not wrong, you'd like to put an invisible layer above the document and your invisible markup may be preceding your document image (is this correct?).

Instead, I propose that you put the invisible right after the document image but changing the position to absolute.

Notice that you need a parent element to have position: relative and then you will be able to use this idea. Otherwise your absolute layer will be placed just in the top left corner.

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is html

Hope this helps. See here for more information about CSS positioning.


1