点击事件在当前点击位置弹出一个弹窗

最新推荐文章于 2024-05-28 11:22:13 发布

转载最新推荐文章于 2024-05-28 11:22:13 发布 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：http://www.cnblogs.com/wenb/p/7263289.html

本文详细介绍了如何在不同浏览器中（包括IE和Firefox）准确获取鼠标的当前位置，通过使用自定义函数getEvent()来兼容各种浏览器的事件处理机制，确保了在网页开发中能够一致地实现鼠标位置追踪。

<script type="text/javascript">
            //获取鼠标位置GetPostion 
            function GetPostion(e) { 
            var x = getX(e); 
            var y = getY(e); 
            return [x,y]
            } 
            function getX(e) { 
            e = e || window.event; 
            return e.pageX || e.clientX + document.body.scrollLeft - document.body.clientLeft 
            } 
            function getY(e) { 
            e = e|| window.event; 
            return e.pageY || e.clientY + document.body.scrollTop - document.body.clientTop 
            } 
            
            $("table tr").click(function(){
                $(".cars-info-control").remove();
                var mousePos=GetPostion();
                var selfY=mousePos[1]-40;
                var selfX=mousePos[0]-78;
                $('<div class="btn-group cars-info-control"><a class="btn">调度</a> <a class="btn">当前位置</a> <a class="btn">视频</a> </div>')
                .css("position","absolute").css("top",selfY).css("left",selfX).appendTo("body")
            })
        </script>

上述方法，在FF下是无用报错（e is undifind），原来FF不支持直接的event，解决方法是不直接利用event属性，用下面的代码即可

 function getEvent() //同时兼容ie和ff的写法
        {  
            if(document.all)   return window.event;    
            func=getEvent.caller;        
            while(func!=null){  
                var arg0=func.arguments[0];
                if(arg0)
                {
                  if((arg0.constructor==Event || arg0.constructor ==MouseEvent) || (typeof(arg0)=="object" && arg0.preventDefault && arg0.stopPropagation))
                  {  
                  return arg0;
                  }
                }
                func=func.caller;
            }
            return null;
        }

 //获取鼠标位置GetPostion 
         function GetPostion() {
              var e=getEvent();
              var x = getX(e);
              var y = getY(e);
              return [x, y]
           }

         function getX(e) {
               
             return e.pageX || e.clientX + document.body.scrollLeft - document.body.clientLeft
           }

         function getY(e) {
             
            return e.pageY || e.clientY + document.body.scrollTop - document.body.clientTop
          }