zoukankan      html  css  js  c++  java
  • zz 用JS控制Iframe鼠标的中轴滚动事件,并使鼠标在ifrme内时,父窗口滚动失效

    http://hi.baidu.com/%D4%AC%BC%AA%BA%BD/blog/item/ce69b137a03aecd4a2cc2b65.html

    在做WebGis时要实现用鼠标的中轴来控制地图的放大缩小,但是当鼠标在IFRAME里面上下滚动的时候,整个页面都跟随者上下滚动了,达不到理想的效果,试了N种办法,无解。

    经过千辛万苦的实验,终于找到了解决方法,需要为JS添加一个事件,当鼠标在Iframe页面里面滚动的的时候,使父窗口滚动禁用。代码如下:

        鼠标滚动事件代码:

            function sdZoom()
        {
            //alert(event.wheelDelta);
            window.top.topmapFrame.focus();      //首先使Iframe获得焦点
            var strDate = new Date();
            if(event.wheelDelta>=120)        //向上滚动鼠标事件
            {//放大
                    eval(zoomIn);      //js控制放大
            }
            else if(event.wheelDelta<=-120)     //向下滚动鼠标事件
            { 
                    eval(zoomOut);   //js控制缩小
            }
        }

       以上是实现了js控制鼠标滚动放大缩小的功能,最主要的代码在下面,不让父窗口跟随滚动,在Iframe里面连接的页面里面加上如下的JS代码;

    <script type="text/javascript">
        if(document.addEventListener)

          {
                document.addEventListener("DOMMouseScroll",function(e){
                 e.preventDefault();
                  },false);
          }

        else{
                 document.onmousewheel = function(){
                event.returnValue = false;
       };
    }

    </script>

    哈哈,问题解决

    --------------------- 我可以操纵冰冷的代码,但我操纵不了我的人生...... [url=http://www.puya360.com]西安普雅软件工作室[/url]
  • 相关阅读:
    iOS中block实现的探究
    [ES6] 19. for ... of
    [ES6] 18. Map
    [ES6] 17. Set
    [ES6] 16. Object Enhancements
    [MEAN Stack] First API -- 5. Using $resource to setup REST app
    [AngularJS] Provider
    [MEAN Stack] First API -- 4. Organize app structure
    [AngularJS] ngCloak
    [Angular-Scaled Web] 9. Control your promises with $q
  • 原文地址:https://www.cnblogs.com/ternastone/p/1901746.html
Copyright © 2011-2022 走看看