当mousemove事件遇到iframe

DuoFG 2010-01-31 10:49:34

我想给body绑定一个mousemove事件，比如说获取任意时刻鼠标在页面中的坐标。
但是当这个body包含iframe并且鼠标移入这个框架中时，将不会触发那个mousemove事件。

如何才能在iframe中也触发那个mousemove事件呢？

...全文

669 8 打赏收藏转发到动态举报

写回复

8 条回复

切换为时间正序

请发表友善的回复…

发表回复

jueeduilingdu 2010-02-02

打赏
举报

回复

帮楼主顶了啊

抽风的凹凸曼 2010-02-02

打赏
举报

回复

这个问题比较普遍，关注中~~

xuetao121 2010-02-02

打赏
举报

回复

[Quote=引用 1 楼 zswang 的回复:]
iframe如果嵌套的是同域的页面，可直接通过parent通知容器页面。
[/Quote]
+1

DuoFG 2010-02-02

打赏
举报

回复

谢谢大家，我最终的解决办法也是和sunxing007的一样--临时创建一个遮盖层把iframe给盖住。

passself 2010-02-01

打赏
举报

回复

楼主早日解决，帮顶

sunxing007 2010-02-01

打赏
举报

回复

[Quote=引用 1 楼 zswang 的回复:]
iframe如果嵌套的是同域的页面，可直接通过parent通知容器页面。
[/Quote]
这个方法我还没有试过，试试看。

sunxing007 2010-02-01

打赏
举报

回复

你的这个问题我遇到过。给你举个例子希望你能够解决你的问题，请看我写的js分栏效果：
http://blog.csdn.net/sunxing007/archive/2009/08/28/4492453.aspx
最初写的时候，发现鼠标拖动分割线经过左右两边的iframe的时候就不灵了。
我对http://blog.csdn.net/sunxing007/archive/2009/08/28/4492453.aspx
这个问题给出的解决方案是：当鼠标按下去准备拖动分割线的时候，出现一个半透明的遮盖层，这个遮盖层的z-index比较高，那么鼠标在移动的时候其实是在这个遮盖层之上移动，这样就会触发mousemove。

王集鹄 2010-01-31

打赏
举报

回复

iframe如果嵌套的是同域的页面，可直接通过parent通知容器页面。

对整threeJS体系进行全面剖析。整理出全面的教学大纲，涵盖内容面非常广。此教学版本为threeJS107版本。关于版本不建议大家使用低于90的版本学习。以下是课程目录1-ThreeJS概览（基本图形简介，什么是点线面如何绘制点线面，什么是材质，什么是几何体，什么是相机，什么是渲染器，什么是场景）2-相机和渲染器（详解相机类型，渲染器如何使用，针对不同场景怎么用，怎么调效果，怎么渲染，怎么输出画布，如何解决透明问题等等）3-创建平面几何（常见的几何体如何使用，如何使用简单的几何体绘制出自定义自己想要的几何体，关于几何体的性能剖析，如何解决性能，几何体的渲染原理）4-高级图形算法常见库（求直线的斜率计算线段与圆的交点计算线段的长度判断折线是否在多边形内等等）5-sprite精灵(怎么让一个图标永远朝向屏幕，精灵的属性，精灵材质原理等，广告提示框必用)6-骨骼游戏动画（什么是模型动画，常见游戏案例，如何让人头进行各种攻击动作）7-3d模型加载（常见模型格式，如何渲染不同格式，不同格式的特点，什么格式性能优越，模型渲染异常，贴图不显示等问题详解）8-高阶动态纹理（你所不知道的纹理用法，我说你不知道，你肯定不知道）9-漫游轨迹以及其动画路径（怎么绘制贝塞尔曲线，如何使用曲线上的路径，跟随路径移动的原理，相机如何运动，物体如何运动）10-着色器（什么是着色器。初识着色器基础，着色器材质怎么用，怎么使用着色器库）11-常见渲染以及透明度问题12-对象拾取以及拖拽（3d世界里面如何拖拽物体，拖拽的原理，mousemove mouseon等的事件效果）13-世界坐标以及组的问题（什么是相对坐标，什么是世界坐标，什么是当前坐标，怎么转化父子坐标系，组的优化，为什么用组，组的优势）14-指定对象旋转中心（什么是物体的几何体中心，如何改变中心，如何绕轴转动）15-层级对象渲染（多个场景一键切换，切换的优势，针对大项目的用法）16-拓展了解系列（不定期不断更新案例，各种酷炫效果bloom,halo等，以及各种3d图表，粒子案例等,不断构建你的3d实践能力）

在iframe上mouseup时，document改变导致解绑事件失效。解决办法：在mousedown时创建一个遮盖层，mouseup时移除。

当mousemove事件遇到iframe 最近开发的项目中有一个效果，拖拽缩放div的width 右边使用iframe引入一个页面，这样问题就出来了，鼠标移动事件触发时，如果鼠标移动过快，进入到iframe页面，onmousemove事件就会失效我的解决办法：给 vue中的key ...

问题：监听鼠标拖动事件mousemove，当鼠标移动到页面嵌的iframe上时，事件无法被监听到，当鼠标移出iframe后，事件又能被监听到了。解决：可以创建一个层级高的div覆盖在整个项目上面，然后监听该div的鼠标移动事件。 const mask = document.createElement('div') mask.style.cssText = 'position: absolute;top: 0;left: 0;width: 100vw;height: 100vh;z-index: 9999;

做拖拽调整div大小的时候发现鼠标在iframe上时无法触发mouseup事件，导致mousemove事件无法注销，鼠标滑动时一直改变div大小解决方法：prevent-events mdn上关于prevent-events解释： auto 与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同 none 元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在

87,907

社区成员

224,614

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章