У меня есть div, у которого background:transparent, наряду с border. Под этим div у меня больше элементов.
В настоящее время я могу щелкнуть базовые элементы, когда я нажимаю за пределами наложения div. Тем не менее, я не могу щелкнуть базовые элементы, щелкнув непосредственно на наложении div.
Я хочу, чтобы иметь возможность щелкнуть по этому div, чтобы я мог щелкнуть по базовым элементам.
Да, вы CAN сделаете это.
Используя pointer-events: none вместе с условными операторами CSS для IE11 (не работает в IE10 или ниже), вы можете получить решение, совместимое с браузером для этой проблемы.
Используя AlphaImageLoader, вы можете даже нанести прозрачный .PNG/.GIF на оверлей 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;
Вот базовая страница примера со всем кодом.
Также приятно знать...
Вы можете отключить указатели-события в родительском элементе (возможно, прозрачном 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>
Щелчок через 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.
Я добавляю этот ответ, потому что я не видел его здесь полностью. Я смог сделать это, используя elementFromPoint. Итак, в основном:
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.
Вот polyfill, чтобы pointer-events: none; работал над IE до 11.
https://github.com/kmewhort/pointer_events_polyfill
$('#elementontop).click(function (e) {
$('#elementontop).hide();
$(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
$('#elementontop').show();
});
Мне нужно было сделать это и решил пойти по этому пути:
$('.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');
});
В настоящее время я работаю с воздушными шарами на холсте. Но поскольку баллон с указателем завернут в 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 --
}
});
Эта функция проверяет координаты события щелчка тела, или он уже был нажат, и возвращает атрибут имени. Я думаю, что нет необходимости идти глубже, но вы видите, что это не так сложно. Надеюсь, что он был...
это не работает. работа вокруг - это вручную проверить координаты щелчка мыши на области, занимаемой каждым элементом.
область, занятая элементом, может быть найдена с помощью 1. получения местоположения элемента относительно верхнего левого угла страницы и 2. ширины и высоты. библиотека, подобная jQuery, делает это довольно простым, хотя это можно сделать в простых js. добавление обработчика событий для mousemove объекта document обеспечит непрерывное обновление положения мыши сверху и слева от страницы. решая, находится ли мышь над любым данным объектом, состоит в проверке, находится ли положение мыши между левым, правым, верхним и нижним краями элемента.
Нет, вы не можете нажать "через элемент". Вы можете получить координаты щелчка и попытаться определить, какой элемент находился под элементом, который был нажат, но это действительно утомительно для браузеров, у которых нет document.elementFromPoint. Затем вам все равно придется эмулировать действие нажатия по умолчанию, которое не обязательно тривиально в зависимости от того, какие элементы у вас там.
Поскольку у вас есть полностью прозрачная область окна, вам, вероятно, будет лучше реализовать ее как отдельные пограничные элементы снаружи, оставив центральную область свободной от препятствий, чтобы вы могли просто просто щелкнуть прямо.
Еще одна идея попробовать (ситуационно):
Любые мысли?
Я думаю, что вы можете рассмотреть возможность изменения разметки. Если я не ошибаюсь, вы должны поместить невидимый слой над документом, и ваша невидимая разметка может предшествовать вашему документу (это правильно?).
Вместо этого я предлагаю, чтобы вы поместили невидимое право после изображения документа, но изменили позицию на абсолютное.
Обратите внимание, что вам нужен родительский элемент, который должен иметь позицию: относительный, и тогда вы сможете использовать эту идею. В противном случае ваш абсолютный уровень будет размещен в левом верхнем углу.
Элемент абсолютной позиции позиционируется относительно первого родительского элемента элемент, который имеет положение, отличное от статического. Если такой элемент не найден, то содержащим его блоком является html
Надеюсь, это поможет. См. здесь для получения дополнительной информации о позиционировании CSS.
Просто обернуть a тег вокруг всех 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>
в моем примере мой класс титров имеет эффекты при наведении курсора на события указателя: нет; ты просто проиграешь
Обтекание содержимого сохранит ваши эффекты при наведении, и вы можете нажать на всю картинку, включая div, с уважением!
Вы можете разместить наложение AP как...
#overlay {
position: absolute;
top: -79px;
left: -60px;
height: 80px;
width: 380px;
z-index: 2;
background: url(fake.gif);
}
<div id="overlay"></div>
просто переверните туда, где вы не хотите, то есть клик. Работает во всем.
Я думаю, что event.stopPropagation(); следует упомянуть и здесь. Добавьте это к функции Click вашей кнопки.
Предотвращает всплытие события в DOM-дереве, предотвращая уведомление любых родительских обработчиков о событии.
Более простым способом было бы встроить прозрачное фоновое изображение, используя URI данных, следующим образом:
.click-through {
pointer-events: none;
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}