鼠标指针被高层元素挡住时,触发下层元素的鼠标事件

在做如下图这种拖拽效果的时候,遇到一个问题:

被拖拽的元素一直位于一个比较高的层,且一直跟随鼠标移动,这样会挡住鼠标,导致其无法触发下层元素的任何事件。这样下层的元素就无法响应拖拽的事件了。

受到这篇文章的启发:http://www.vinylfox.com/forwarding-mouse-events-through-layers/

最终实现的思路是,在mouseover事件中:

1.隐藏高层元素

2.根据坐标获取当前位置的最高层DOM

3.手动触发事件

element.hide();
var over=document.elementFromPoint(me.clientX,me.clientY)
//手动触发事件
if(over && over.onmouseenter) over.onmouseenter(me);
element.show();

  

时间: 2024-08-05 05:27:59

鼠标指针被高层元素挡住时,触发下层元素的鼠标事件的相关文章

jQ禁止右键点击、隐藏搜索文本框文字、在新窗口中打开链接、检测浏览器、预加载图片、页面样式切换、所有列等高、动态控制页面字体大小、获得鼠标指针的X值Y值、验证元素是否为空、替换元素、延迟加载、验证元素是否存在于Jquery集合中、使DIV可点击、克隆对象、使元素居中、计算元素个数、使用Google主机上的Jquery类库、禁用Jquery效果、解决Jquery类库与其他Javascript类库冲突

1. 禁止右键点击 代码如下: $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. 隐藏搜索文本框文字 代码如下: $(document).ready(function() { $("input.text1").val("Enter your search text here"); textFill($

当子元素需要相对父元素定位时,父元素无法被子元素撑大该怎么办

今天遇到了子元素相对父元素定位之后,父元素无法被撑开的问题,那是因为绝对定位之后,子元素已经脱离文档流了所以无法用自身的高度把父元素撑开,这个时候只能用js来解决这个问题了: function psize(){ $("父元素").css('height',$("子元素").innerHeight()); } 上面是封装了一个函数,可以通过调用使用. height与innerHeight 的具体情况请看上一篇随笔.

javascript鼠标双击时触发事件大全

javascript事件列表解说 事件 浏览器支持 解说 一般事件 onclick IE3.N2 鼠标点击时触发此事件 ondblclick IE4.N4 鼠标双击时触发此事件 onmousedown IE4.N4 按下鼠标时触发此事件 onmouseup IE4.N4 鼠标按下后松开鼠标时触发此事件 onmouseover IE3.N2 当鼠标移动到某对象范围的上方时触发此事件 onmousemove IE4.N4 鼠标移动时触发此事件 onmouseout IE4.N3 当鼠标离开某对象范围

css cursor鼠标指针光标样式default pointer hand url

我们在DIV CSS布局时候,我们会遇到对对象内鼠标指针光标进行控制,比如鼠标经过指针变为手指形状等样式,接下来我们介绍鼠标指针样式cursor控制.系统默认鼠标指针样式外,可以通过CSS设置图片为鼠标指针,常见有些网站鼠标指针是各种各样小图片样式,当然这个是通过css cursor设置鼠标样式. 详见网站介绍:http://www.divcss5.com/rumen/r427.shtml css cursor鼠标指针光标样式default pointer hand url,布布扣,bubuko

在网页中添加自定义鼠标指针

body{cursor:url('鼠标指针图片网址')} a:hover{cursor:url('鼠标指针图片网址')} 说明1:第一行是鼠标指针初始形态,第二行是鼠标指针碰到链接的形态. 说明2:你需要两个鼠标指针图片(最好这两个图片是一套或是相近的). 说明3:鼠标指针的图片格式是.cur和.ani,不是.jpg..gif或是其它图片格式,这点请注意. 说明4:很遗憾,博客中国不支持任何一种鼠标指针图片格式的上传,大家要实现指针变换,要么就找一些别的网站贴出来的现成的指针图片链接地址,要么就

如何解决鼠标移动到子元素 会触发父元素的mouseout事件

方法一. 用mouseleave/mouseenter代替mouseover/mouseout[最佳方法] mouseover与mouseenter mouseover  => 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件.mouseenter => 只有在鼠标指针从元素外穿入被选元素(到元素内)时,才会触发 mouseenter 事件. mouseout与mouseleave mouseout => 不论鼠标指针离开被选元素还是任何子元素,都会触发 mouse

鼠标指针停止运动触发事件实例代码

鼠标指针停止运动触发事件实例代码:在js中有有内置的鼠标各种事件,比如click事件,mousemove事件等等,但是并没有鼠标指针停止运动这个事件,下面就利用jquery模拟实现此效果,希望能够给需要的朋友带来一定的帮助.代码如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="ht

CSS改网页鼠标指针、改指定元素指针(1)——代码部分

要实现CSS改网页鼠标指针.改指定元素指针,我们应该首先了解以下内容: 所有主流浏览器都支持 cursor 属性. 注释:Opera 9.3 和 Safari 3 不支持 url 值. 注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit". 定义和用法 cursor 属性规定要显示的光标的类型(形状). 该属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状(不过 CSS2.1 没有定义由哪个边界确定这个范围). 默认值: aut

10.3 鼠标指针经过时整行变色提示的表格

近年来,Web 2.0的概念逐渐被广泛接受,其中很重要的一点是强调改善用户体验,例如上一节的例子中,把表格设置为交替背景色,可以使访问者在浏览表格时有更好的体验. 然而对于长时间审核大量数据和浏览表格的用户来说,即使是隔行变色的表格,长时间阅读这样的表格仍然会感到疲劳.而且对于数据壁很大的表格,特别容易看错行或者列.如果参考微软公司Excel软件的做法,我们就可以发现很多可以改进的地方. 例如,在一个行列都很多的表格中,如果能像在Excel中那样,随时以高亮的方式提示一个单元格对应的行号(或行的