当前位置: 代码迷 >> JavaScript >> 关于页面的扩大和缩小的有关问题
  详细解决方案

关于页面的扩大和缩小的有关问题

热度:223   发布时间:2012-03-20 14:01:11.0
关于页面的扩大和缩小的问题.
页面在IE6.0的情况下一切正常,但是用IE7.0之后,如果用ctr+鼠标滑轮,页面会根据鼠标滑轮扩大或者缩小.(IE6.0,页面不会有变化)
  求解决方案.

------解决方案--------------------
document.onmousewheel=function(){
return false;
}
------解决方案--------------------
需要优化下不然滚轮事件就失效了
JScript code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
document.onmousewheel=function(){
    if(event.ctrlKey)
          return false;
    else
          return true;    
}
</script>
</head>
<body>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>            
</body>
</html>

------解决方案--------------------
继续优化让他兼容火狐
JScript code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">

function handleMScroll(e){
    e=e||window.event;
    if(e.ctrlKey){
          return document.all?false:e.preventDefault();
    }else{
          return true;
    }      
}

if(document.all)
     document.attachEvent("onmousewheel",handleMScroll);
else    
     document.addEventListener("DOMMouseScroll",handleMScroll,false);

</script>
</head>
<body>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>            
</body>
</html>

------解决方案--------------------
通过ctrl++,ctrl+-缩放页面先于document.onkeydown执行,没有办法在ie7下屏蔽,但在ff下可以
JScript code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function handleMScroll(e){
    var evt=e||window.event;
    if(evt.ctrlKey){
          return document.all?false:evt.preventDefault();
    }else{
          return true;
    }      
}

function handleDocKeyDown(e){
    var evt=e||window.event;
    var srcEl=evt.target||evt.srcElement;
    var nKeyCode=evt.which||evt.keyCode;
  var fbCodes="|107|109|187|189|";
  
     if(evt.ctrlKey&&fbCodes.indexOf("|"+nKeyCode+"|")!=-1){
        return document.all?false:e.preventDefault();
    }else{
        return true;
    }    
}

if(document.all){
     document.attachEvent("onmousewheel",handleMScroll);
     document.attachEvent("onkeydown",handleDocKeyDown);
}else{
     document.addEventListener("DOMMouseScroll",handleMScroll,false);
     document.addEventListener("keydown",handleDocKeyDown,false);
}     

</script>
</head>
<body>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
    1<br/>
    2<br/>
    3<br/>
    4<br/>
    5<br/>
    6<br/>
</body>
</html>
 
  相关解决方案