我有一个具有背景的div:透明,以及边框。在这个div下面,我有更多的元素。

目前,当我在覆盖div外部单击时,我可以单击底层元素。但是,当我直接单击覆盖div时,我无法单击底层元素。

我希望能够单击这个div,以便单击底层元素。


当前回答

不,你不能点击一个元素。您可以获取单击的坐标,并尝试找出单击元素下面是什么元素,但对于没有document.elementFromPoint的浏览器来说,这真的很乏味。然后,您仍然需要模拟默认的单击操作,这不一定是微不足道的,这取决于您在那里有什么元素。

由于你有一个完全透明的窗口区域,你可能会更好地将其作为外部的独立边界元素来实现,让中心区域没有障碍物,这样你就可以直接点击。

其他回答

它不是那样工作的。解决方法是根据每个元素所占据的区域手动检查鼠标点击的坐标。

元素所占的面积可由1找到。获取元素相对于页面左上角的位置,以及2。宽度和高度。像jQuery这样的库使得这非常简单,尽管它可以用普通的js实现。在文档对象上添加mousemove的事件处理程序将从页面的顶部和左侧连续更新鼠标位置。确定鼠标是否在任何给定对象上包括检查鼠标位置是否在元素的左、右、上和下边缘之间。

另一个尝试(情境)的想法是:

将所需内容放入div中;将非点击覆盖放在整个页面上,z索引更高,制作原始div的另一个裁剪副本overlay和abs将复制div放置在与原始内容相同的位置,您希望使用更高的z索引进行单击?

有什么想法吗?

我目前使用的是画布演讲气球。但是,由于带有指针的气球被包装在一个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属性。我认为没有必要再深入一点,但你知道这并没有那么复杂。希望在我身边。。。

允许用户通过div单击底层元素取决于浏览器。所有现代浏览器,包括Firefox、Chrome、Safari和Opera,都能理解指针事件:没有。

对于IE,这取决于背景。如果背景是透明的,则无需执行任何操作即可进行点击。另一方面,对于像背景这样的东西:白色;不透明度:0;过滤器:Alpha(不透明度=0);,IE需要手动事件转发。

请参阅JSFiddle测试和CanIUse指针事件。

例如,只需在所有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,问候!