【问题标题】:Make an element visible to the user but invisible to events使元素对用户可见但对事件不可见
【发布时间】:2011-02-07 12:33:28
【问题描述】:

我不太确定如何描述我想要做的事情,但我会尽力而为。

目前我有一个父 <div>,其中包含绝对定位的子 <div>s,我正在跟踪相对于鼠标所在元素的鼠标指针位置坐标。

目前,当我将鼠标悬停在我的孩子 <div>s 上时,我得到了相对于它们的鼠标位置,但我希望坐标与父 <div> 相对,即使鼠标悬停在子元素上也是如此。

所以我基本上希望子元素可见,但对mousemove 透明,所以我希望mousemove 直接进入父元素。

我该怎么做?我是否可能需要以某种方式让父母 <div> 出现在前台但仍然让孩子 <div>s 显示出来?或者制作一个透明的<div> 叠加层只是为了获取鼠标坐标?

【问题讨论】:

    标签: javascript html css xhtml dom-events


    【解决方案1】:

    您可以通过将元素的pointer-events CSS 属性设置为none 来使元素对事件“透明”。例如:

    <div><!--container-->
    <div style="pointer-events: none"><!--inner div; will not respond to mouse clicks-->
    </div>
    </div>
    

    【讨论】:

      【解决方案2】:

      好的,我想出了一种方法,当我将鼠标悬停在子元素上时可以忽略它们。

      获取事件的目标时,如果目标的类名匹配某些内容,我可以将目标更改为 parentNode

      if (target.className.toLowerCase() === 'ignoreme') { target = target.parentNode; }

      【讨论】:

        【解决方案3】:

        您在代码中使用 event.target (srcElement),只需摆脱它并替换为有问题的 div。

        【讨论】:

          【解决方案4】:

          如果您将事件处理程序放在父 div 上,那么当事件冒泡时,它将是获取事件的原因。至于定位问题,让你的父 div 为position: relative 可能会让你的生活更轻松。据我所知,事件中的鼠标坐标始终是相对于窗口的,因此无论如何您都必须进行数学运算。我真的很笨,过去通过反复试验我已经能够弄清楚这一点:)

          【讨论】:

          • 我创建了我的父 div position:relative,这样我就可以让我的子 div 绝对定位在其中,这很好。是的,你是对的,如果我在包含 div 而不是整个页面中有我的事件处理程序,那么子 div 设置它不会有任何问题。我仍然很想知道是否有办法将它作为一个完整的页面事件但在背景中有某些元素或被忽略。
          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2016-07-18
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2016-11-30
          相关资源
          最近更新 更多