如何将鼠标事件调用到 javascript 中位于其他对象后面的 dom 对象?

Posted

技术标签:

【中文标题】如何将鼠标事件调用到 javascript 中位于其他对象后面的 dom 对象?【英文标题】:how to call a mouse event to dom object that lies behind other in javascript? 【发布时间】:2020-01-27 18:54:56 【问题描述】:

我想调用一个mousemove js事件到一个在后面的dom对象,我怎么能忽略前面的对象调用这个事件呢?

我想调用一个矩形绘制,我用 js 和 div 制作它们,首先我有根 div,即我的高度和宽度参考,然后想使用鼠标事件来调整大小和重新定位“矩形”div ,问题是当我调用 mousemove 事件到我的“root”以获取鼠标位置数据并且我的 rect 位于前面然后计算变得疯狂,我的意思是,当我的鼠标到达时,“root”.mousemove 事件被取消'rect' 对象,所以我想将我的 rect 设置为 'transparent' 然后只使用我的 'root' 事件处理程序,希望你能理解和帮助。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root">
            <div id="rect">

            </div>
    </div>
    <script>
        var root = document.getElementById('root');
        var rect =document.getElementById('rect');

        root.addEventListener('mousemove',function(e)
            rect.style.width = e.offsetX;
            rect.style.height = e.offsetY;
        );
    </script>
</body>
</html>

我想让'rect'对js鼠标事件'透明'。

【问题讨论】:

我将采取的总结方法:我认为您只想在文档级别处理鼠标移动,然后将元素位置收集到数组中,然后检查该事件中的任何鼠标坐标冲突,在如果超过 1 个,碰撞逻辑会找到最底部的项目,根据需要对该项目进行操作。 我认为你的事件处理程序应该使用事件冒泡概念。 【参考方案1】:

这里是示例 JS fiddle 示例 (link)。这工作正常。当您移动鼠标时,内部矩形的高度和宽度会发生变化。让我知道这是否是您想要的。

<!DOCTYPE html>
  <html lang="en">
    <head></head>
    <body>
      <div id="root" style="border:1px solid red; height: 100px; width: 100%;">
        <div id="rect" style="border:1px solid gray; min-height: 20px; min-width:10px; margin: 5px;">
        </div>
</div>
<script>
    var root = document.getElementById('root');
    var rect =document.getElementById('rect');

    root.addEventListener('mousemove',function(e)
        rect.style.width = e.offsetX + "px";
        rect.style.height = e.offsetY + "px";
    );
  </script>
 </body>
</html>

【讨论】:

如果这对你有用,请标记为答案以关闭线程。【参考方案2】:

我发现了我的问题,简单的方法是设置指针事件:无;在“rect”.css 属性中, 或创建一个新的 CSS 选择器:

.rect.scaling
    pointer-events: none;

【讨论】:

以上是关于如何将鼠标事件调用到 javascript 中位于其他对象后面的 dom 对象?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 Javascript 中移动子元素时触发一次鼠标事件?

当鼠标光标位于属于面板的组合框上时如何触发面板滚动事件

如何:当鼠标位于 WPF 边框的边和角之一时触发事件

将 JavaScript 鼠标事件从一个元素传播到另一个元素?

mouseovermouseout和mouseentermouseleave

CListCtrl 鼠标事件不起作用