Поместите строки SVG поверх элементов HTML, сохраняя возможность взаимодействия с элементами HTMl [duplicate]

Еще одна идея попробовать (ситуационная):

1. Поместить содержимое, которое вы хотите в div;
2. Поместить не щелканье наложения по всей странице с z-индексом выше,
3. сделать другую обрезанную копию исходного div
4. наложения и абс позиционировать копию div в том же месте, что и исходное содержимое, которое вы хотите кликать с помощью еще более высокий z-индекс?

Любые мысли?

просто оберните тэг вокруг всего извлечения html, например

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

в моем примере класс caption имеет эффекты зависания, что с указателями-событиями: none; вы просто потеряете

обертывание содержимого будет поддерживать ваши зависающие эффекты, и вы можете щелкнуть по всему изображению, включая div, !

В настоящее время я работаю с воздушными шарами на холсте. Но поскольку баллон с указателем завернут в div, некоторые ссылки под ним больше не будут доступны. В этом случае я не могу использовать extjs. См. базовый пример для моего учебника по речевому шару , который требует 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]);
                                     });
         }

Я вызываю эту функцию на каждом (новом) шаре. Он захватывает координаты левого / верхнего и правого / нижних углов link.class - дополнительно атрибут name для того, что делать, если кто-то нажимает на эти координаты, и я любил устанавливать 1, что означает, что он не щелкнул струей , И переместите этот массив на клик. Вы можете использовать push тоже.

Чтобы работать с этим массивом:

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

Эта функция проверяет координаты события щелчка тела или уже была нажата и возвращает атрибут имени , Я думаю, что нет необходимости идти глубже, но вы видите, что это не так сложно. Надеюсь, что это было ...

Также приятно знать ... Вы можете отключить указатели-события в родительском элементе (возможно, прозрачном 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>

Нет, вы не можете нажать «через» элемент. Вы можете получить координаты щелчка и попытаться определить, какой элемент находился под элементом clicked, но это действительно утомительно для браузеров, у которых нет document.elementFromPoint. Затем вам все равно придется эмулировать действие нажатия по умолчанию, которое не обязательно тривиально, в зависимости от того, какие элементы у вас там.

Поскольку у вас есть полностью прозрачная область окна, вы, вероятно, будете лучше использовать его в качестве отдельных элементов границы вокруг, оставляя центр без препятствий, чтобы вы могли просто щелкнуть прямо.

Вы можете поместить AP-наложение, например ...

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

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

просто переверните его туда, где вы не хотите, то есть клик. Работает во всех.

Я думаю, что вы можете рассмотреть возможность изменения разметки. Если я не ошибаюсь, вы должны поместить невидимый слой над документом, и ваша невидимая разметка может предшествовать вашему документу (это правильно?).

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

Обратите внимание, что вам нужен родительский элемент для размещения позиции: относительный, и тогда вы сможете использовать эту идею. В противном случае ваш абсолютный уровень будет размещен только в верхнем левом углу.

Элемент абсолютной позиции позиционируется относительно первого родительского элемента, который имеет позицию, отличную от статической. Если такой элемент не найден, то содержащий блок является html

Надеюсь, что это поможет. См. здесь для получения дополнительной информации о позиционировании CSS.

Я думаю, что event.stopPropagation(); следует упомянуть здесь. Добавьте это к функции щелчка вашей кнопки.

Предотвращает появление пузырьков в дереве DOM, предотвращая уведомление любого из обработчиков родительских событий.

это не работает. работа вокруг - это вручную проверить координаты щелчка мыши на области, занимаемой каждым элементом. Область

, занятая элементом, может быть найдена найденным 1. Получает местоположение элемента относительно вершины слева от страницы и 2. ширина и высота. библиотека, подобная jQuery, делает это довольно простым, хотя это можно сделать в простых js. добавление обработчика событий для mousemove объекта document обеспечит непрерывное обновление положения мыши сверху и слева от страницы. решая, находится ли мышь над любым данным объектом, состоит в проверке, находится ли положение мыши между левым, правым, верхним и нижним краями элемента.

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

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

Я добавляю этот ответ, потому что я не видел его здесь полностью. Я смог сделать это, используя 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 по крайней мере.

Щелчок через 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.

1. Скрыть наложение элемента
2. Определить координаты курсора
3. Получить элемент в этих координатах
4. Триггер щелкнуть по элементу
5. Показать повторно наложенный элемент

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