我有一个具有背景的div:透明,以及边框。在这个div下面,我有更多的元素。
目前,当我在覆盖div外部单击时,我可以单击底层元素。但是,当我直接单击覆盖div时,我无法单击底层元素。
我希望能够单击这个div,以便单击底层元素。
我有一个具有背景的div:透明,以及边框。在这个div下面,我有更多的元素。
目前,当我在覆盖div外部单击时,我可以单击底层元素。但是,当我直接单击覆盖div时,我无法单击底层元素。
我希望能够单击这个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,这意味着它没有被单击jet。然后将此阵列取消移动到单击阵列。你也可以使用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 --
}
});
此函数用于证明主体单击事件的坐标或是否已单击该事件,并返回name属性。我认为没有必要再深入一点,但你知道这并没有那么复杂。希望在我身边。。。
其他回答
更简单的方法是使用数据URI内联透明背景图像,如下所示:
.click-through {
pointer-events: none;
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
这不是问题的精确答案,但可能有助于找到解决方法。
我有一个图像,我在页面加载时隐藏并在等待AJAX调用时显示,然后再次隐藏。。。
我发现在加载页面时显示我的图像,然后使其消失,并能够在隐藏之前单击图像所在的位置的唯一方法是将图像放入DIV中,使DIV的大小为10x10像素或足够小,以防止其引发问题,然后隐藏包含的DIV。这允许图像在可见时溢出DIV,当DIV隐藏时,只有divs区域受到无法单击下方对象的影响,而不是DIV包含和显示的图像的整个大小。
我尝试了所有隐藏图像的方法,包括CSS display=none/block,opacity=0,hidden=true隐藏图像。所有这些都导致我的图像被隐藏,但显示的区域就像下面的东西上有一个盖子,所以点击等不会对底层对象起作用。一旦图像位于一个小DIV内,我隐藏了这个小DIV,图像所占的整个区域都是清晰的,只有我隐藏的DIV下的小区域受到影响,但当我将其缩小到足够小(10x10像素)时,问题得到了解决(某种程度上)。
我发现这是一个肮脏的解决方法,它应该是一个简单的问题,但我无法找到任何方法在没有容器的情况下以其原生格式隐藏对象。我的目标是等。如果有人有更好的方法,请告诉我。
隐藏覆盖元素确定光标坐标获取这些坐标上的元素触发点击元素再次显示覆盖元素
$('#elementontop').click(e => {
$('#elementontop').hide();
$(document.elementFromPoint(e.clientX, e.clientY)).trigger("click");
$('#elementontop').show();
});
例如,只需在所有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,问候!
我目前使用的是画布演讲气球。但是,由于带有指针的气球被包装在一个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,这意味着它没有被单击jet。然后将此阵列取消移动到单击阵列。你也可以使用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 --
}
});
此函数用于证明主体单击事件的坐标或是否已单击该事件,并返回name属性。我认为没有必要再深入一点,但你知道这并没有那么复杂。希望在我身边。。。