我有 div ,有 background:transparent ,还有 border . 在这个 div 下面,我有更多元素 .
目前,当我单击叠加层 div 外部时,我可以单击基础元素 . 但是,直接单击叠加 div 时,我无法单击基础元素 .
我希望能够点击这个 div ,以便我可以点击底层元素 .
14 回答
6
我需要这样做,并决定采取这条路线:
$('.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');
});
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]);
});
}
$("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 --
}
});
14 回答
我需要这样做,并决定采取这条路线:
尝试(情境)的另一个想法是:
将您想要的内容放在div中;
将非点击叠加层放在整个页面上,z-index更高,
制作原始div的另一个裁剪副本
overlay和abs将复制div放在与您想要使用更高z-index可点击的原始内容相同的位置?
有什么想法吗?
不,你可以
document.elementFromPoint
. 然后你仍然需要模拟点击的默认动作,这不一定是微不足道的,具体取决于你在那里的元素 .由于你有一个完全透明的窗口区域,你可能最好将它作为外围的单独边框元素实现,让中心区域没有阻碍,所以你可以直接点击直接通过 .
点击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 .
例如,只需在所有html提取中包装一个标记
在我的例子中,我的 Headers 类有悬停效果,用 pointer-events:none; 你就会失败
包装内容将保持您的悬停效果,您可以点击所有图片,div包括,问候!
我目前正在使用帆布语音气球 . 但是因为带有指针的气球被包裹在一个div中,所以它下面的一些链接不再能够点击了 . 在这种情况下我不能使用extjs . See basic example for my speech balloon tutorial requires HTML5
所以我决定从数组中的气球内部收集所有链接坐标 .
我在每个(新)气球上调用此功能 . 它抓取link.class的左/上和右/下角的坐标 - 另外还有name属性,如果有人点击那个坐标我该做什么,我喜欢设置1,这意味着它没有被点击喷射 . 并将此数组移至clickarray . 你也可以用push .
要使用该数组:
此函数可以校对正文单击事件的坐标,或者是否已单击它并返回name属性 . 我认为没有必要深入,但你看它并不复杂 . 希望在... ...
我认为您可以考虑更改标记 . 如果我没有错,你想在文档上方放置一个不可见的图层,你的不可见标记可能在你的文档图像之前(这是正确的吗?) .
相反,我建议你在文档图像之后放置不可见但是将位置改为绝对 .
请注意,您需要父元素具有position:relative,然后您才能使用此构思 . 否则,您的绝对图层将放在左上角 .
希望这可以帮助 . 有关CSS定位的更多信息,请参见here .
隐藏覆盖元素
确定光标坐标
获取这些坐标上的元素
触发单击元素
再次显示重叠元素
它不起作用 . 解决方法是手动检查鼠标点击每个元素占用区域的坐标 .
可以通过以下方式找到元素占据的区域:获取元素相对于页面左上角的位置,以及2.宽度和高度 . 像jQuery这样的库让这很简单,虽然它可以在普通的js中完成 . 在
document
对象上添加mousemove
的事件处理程序将从页面的顶部和左侧提供鼠标位置的连续更新 . 判断鼠标是否在任何给定对象上,包括检查鼠标位置是否在元素的左边,右边,上边和下边之间 .我正在添加这个答案,因为我没有在这里完整地看到它 . 我能够使用elementFromPoint来做到这一点 . 所以基本上:
将单击附加到要单击的div
隐藏它
确定指针所在的元素
点击那里的元素点击 .
在我的情况下,覆盖div是绝对定位 - 我不确定如果这有所作为 . 这至少适用于IE8 / 9,Safari Chrome和Firefox .
也很高兴知道......
您可以在父元素(可能是透明div)中禁用指针事件,但仍然为其子元素启用它 .
如果您使用多个重叠的div图层,您希望能够单击子元素,同时让父图层对任何鼠标事件都没有反应,这将非常有用 . 为此,所有父母divs获得
pointer-events: none
并且其可点击的子项获得由pointer-events: auto
重新启用的指针事件我想这里也应该提到
event.stopPropagation();
. 将其添加到按钮的Click功能中 .Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
是的,你 CAN 这样做 .
使用
pointer-events: none
以及IE11的CSS条件语句(在IE10或更低版本中不起作用),您可以获得针对此问题的跨浏览器兼容解决方案 .使用
AlphaImageLoader
,您甚至可以将透明.PNG/.GIF
放入叠加层div
中,并使点击流向下方的元素 .CSS:
IE11有条件:
这是一个包含所有代码的basic example page .
您可以放置AP覆盖...
只是把它放在你不想要的地方,即cliked . 适用于所有人 .