我用了一个Frameset,就是top,left,main那种结构的.
在页面上按快捷键后left的宽度设置为0了,将其隐藏起来.
现在我想做成按快捷键后left宽度设置为5,留个边,鼠标划过的时候会弹出left,鼠标移开left又收回去.类似VS里那个解决方案资源管理器或者QQ那样的.
现在我把onmouseover事件加在了left框架上,出现俩问题
1.onmouseover事件执行了三次
2.我的left页中有一个TABLE,里面有TR和TD,貌似当鼠标划过left框架执行了一次mouseover,当进入Table时触发了left的onmouseout,这个该如何处理呢?
代码如下:window.top.frames["index_left"].document.attachEvent("onmouseover",function(){alert("mouseover");});
window.top.frames["index_left"].document.attachEvent("onmouseout",function(){alert("mouseout");});请高人指点下

解决方案 »

  1.   

    代码作用区域不对。
    给你例子:
    例1:<style>  
      <!--  
      .ptr{color:red;cursor:hand;font-family:webdings}  
      -->  
      </style>  
      <script>  
      function   showandshade()  
      {  
      if(span1.innerText==3)  
      {  
      span1.innerText=4  
      document.all("td1").style.display="none"  
      }  
      else  
      {  
      span1.innerText=3  
      document.all("td1").style.display=""  
      }  
      }  
      </script>  
      <body   leftMargin="0"   topMargin="0"   scroll=no>  
      <table   width="100%"   height="100%"   border=0   cellSpacing="0"   cellPadding="0">  
      <tr   height="100%">  
      <td   id="td1"   width="50"   height="100%"   style="display:none"><iframe   src=left.htm   frameborder=0   scrolling=no   width="70"></iframe></td>  
      <td   bgColor=#a4b6d7   onmouseover="showandshade()"   style="font-size:7pt;width:5pt;cursor:default;color=:#ffffff"><span   id="span1"   class="ptr">4</span><font   size="1px"   color=green><br>点<br>击<br>展<br>开</font> </td>  
      <td><iframe   name="main"   src=right.htm   frameborder=0   scrolling=yes   height="100%"   width="100%"></frame></td>  
      </tr>  
      </table>  
      </body>  
      <SCRIPT>  
      if(window.screen.width<'1024'){showandshade()}  
      </SCRIPT>   里面的onmouseover可以修改为onclick
      

  2.   

    例2:<html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <style>
    <!--
    #ssm2 A {
       color:black;
       text-decoration:none;
       font-size:12;
       font-family:verdana;
       }#ssm2 A:hover {
       color:red;
        }
    -->
    </style>
    </head><body><script language="JavaScript">function MM_displayStatusMsg(msgStr) {
    status=msgStr;
    document.MM_returnValue = true;
    }function highlight(x){
    document.forms[x].elements[0].focus()
    document.forms[x].elements[0].select()
    }function MM_jumpMenu(targ,selObj,restore){
    eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");
    if (restore) selObj.selectedIndex=0;
    }var NS
    IE=document.all;
    NS=document.layers;
    hdrFontFamily="Verdana";
    hdrFontSize="2";
    hdrFontColor="white";
    hdrBGColor="#666666";
    linkFontFamily="Verdana";
    linkFontSize="2";
    linkBGColor="white";
    linkOverBGColor="#CCCCCC";
    linkTarget="_top";
    YOffset=60;
    staticYOffset=20;
    menuBGColor="black";
    menuIsStatic="no";
    menuHeader="公共事务"
    menuWidth=80; // Must be a multiple of 5!
    staticMode="advanced"
    barBGColor="#1298fd";
    barFontFamily="Verdana";
    barFontSize="2";
    barFontColor="white";
    barText="论坛导航条";function moveOut() {
    if (window.cancel) {
    cancel="";
    }if (window.moving2) {
    clearTimeout(moving2);
    moving2="";
    }
    if ((IE && ssm2.style.pixelLeft<0)||(NS && document.ssm2.left<0)) {
    if (IE) {ssm2.style.pixelLeft += (5%menuWidth);
    }
    if (NS) {
    document.ssm2.left += (5%menuWidth);
    }moving1 = setTimeout('moveOut()', 5)
    }
    else {
    clearTimeout(moving1)
    }
    };function moveBack() {
    cancel = moveBack1()
    }
    function moveBack1() {
    if (window.moving1) {
      clearTimeout(moving1)
    }if ((IE && ssm2.style.pixelLeft>(-menuWidth))||(NS && document.ssm2.left>(-150))) {
    if (IE) {ssm2.style.pixelLeft -= (5%menuWidth);
    }
    if (NS) {
    document.ssm2.left -= (5%menuWidth);
    }
    moving2 = setTimeout('moveBack1()', 5)}
    else {
      clearTimeout(moving2)
    }
    };lastY = 0;
    function makeStatic(mode) {
    if (IE) {winY = document.body.scrollTop;var NM=ssm2.style
    }
    if (NS) {winY = window.pageYOffset;var NM=document.ssm2
    }
    if (mode=="smooth") {
    if ((IE||NS) && winY!=lastY) {
      smooth = .2 * (winY - lastY);
        if(smooth > 0) smooth = Math.ceil(smooth);
      else smooth = Math.floor(smooth);
        if (IE) NM.pixelTop+=smooth;
        if (NS) NM.top+=smooth;
        lastY = lastY+smooth;
    }
    setTimeout('makeStatic("smooth")', 1)
    }else if (mode=="advanced") {
    if ((IE||NS) && winY>YOffset-staticYOffset) {
      if (IE) {NM.pixelTop=winY+staticYOffset
    }
    if (NS) {NM.top=winY+staticYOffset
    }
    }
    else {
    if (IE) {NM.pixelTop=YOffset
    }
    if (NS) {NM.top=YOffset-7
    }
    }
    setTimeout('makeStatic("advanced")', 1)
    }
    }function init() {
    if (IE) {
    ssm2.style.pixelLeft = -menuWidth;
    ssm2.style.visibility = "visible"
    }
    else if (NS) {
    document.ssm2.left = -menuWidth;
    document.ssm2.visibility = "show"
    }
    else {
    alert('Choose either the "smooth" or "advanced" static modes!')
    }
    }
    function MM_displayStatusMsg(msgStr) {
    status=msgStr;
    document.MM_returnValue = true;
    }
    </script><script language="JavaScript">
    if (IE) {document.write('<DIV ID="ssm2" style="visibility:hidden;Position : Absolute ;Left : 0px ;Top : '+YOffset+'px ;Z-Index : 20;width:1px" onmouseover="moveOut()" onmouseout="moveBack()">')}
    if (NS) {document.write('<LAYER visibility="hide" top="'+YOffset+'" name="ssm2" bgcolor="'+menuBGColor+'" left="0" onmouseover="moveOut()" onmouseout="moveBack()">')}
    tempBar=""
    for (i=0;i<barText.length;i++) {
    tempBar+=barText.substring(i, i+1)+"<BR>"}
    document.write('<table border="0" cellpadding="0" cellspacing="1" width="'+(menuWidth+16+2)+'" bgcolor="'+menuBGColor+'"><tr><td bgcolor="'+hdrBGColor+'" WIDTH="'+menuWidth+'"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+menuHeader+'</b></font></td><td align="center" rowspan="100" width="16" bgcolor="'+barBGColor+'"><p align="center"><font face="'+barFontFamily+'" Size="'+barFontSize+'" COLOR="'+barFontColor+'"><B>'+tempBar+'</B></font></p></TD></tr>')
    function addItem(text, link, target) {
    if (!target) {target=linkTarget}
    document.write('<TR><TD BGCOLOR="'+linkBGColor+'" onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'"><ILAYER><LAYER onmouseover="bgColor=\''+linkOverBGColor+'\'" onmouseout="bgColor=\''+linkBGColor+'\'" WIDTH="100%"><FONT face="'+linkFontFamily+'" Size="'+linkFontSize+'"> <A HREF="'+link+'" target="'+target+'" CLASS="ssm2Items">'+text+'</A></FONT></LAYER></ILAYER></TD></TR>')}
    function addHdr(text) {
    document.write('<tr><td bgcolor="'+hdrBGColor+'" WIDTH="140"> <font face="'+hdrFontFamily+'" Size="'+hdrFontSize+'" COLOR="'+hdrFontColor+'"><b>'+text+'</b></font></td></tr>')}//Only edit the script between HEREaddItem('   论坛测试', 'thread.php?fid=12', '_blank');
    addItem('   备份', 'thread.php?fid=11', '_blank');
    addHdr('测试版');
    addItem('   测试1', 'thread.php?fid=16', '_blank');
    addItem('   测试2', 'thread.php?fid=17', '_blank');
    addItem('   测试3', 'thread.php?fid=18', '_blank');
    addItem('   测试4', 'thread.php?fid=19', '_blank');// and HERE! No more!document.write('<tr><td bgcolor="'+hdrBGColor+'"><font size="0" face="Arial"> </font></td></TR></table>')
    if (IE) {document.write('</DIV>')}
    if (NS) {document.write('</LAYER>')}
    if ((IE||NS) && (menuIsStatic=="yes"&&staticMode)) {makeStatic(staticMode);}</script>
    <script>
    window.onload=init
    </script></body>
    </html></style>
    </head>
      

  3.   


    <div id="demo" style="background:#E9FDF1;border:1px solid #7CCC99;" onmousemove="leftmouseover()" onmouseout="leftmouseout()">
    <p>无标题文档</p>
    </div>
    <div id="rs" style="background:#E9FDF1;border:1px solid #7CCC99;"></div>
    <script type="text/javascript">
    <!--
    /*
    window.top.frames["index_left"].document.attachEvent("onmouseover",function(){
    left_mouseover();
    });
    window.top.frames["index_left"].document.attachEvent("onmouseout",function(){
    left_mouseout();
    });
    */
    function $(id){return (document.getElementById) ? document.getElementById(id): document.all[id];}
    var i;
    i=0
    function _u(msg){
    $("rs").innerHTML+=msg;
    }
    function leftmouseover(){
    i++;
    _u(i+"over<br />");
    }
    function leftmouseout(){
    i++;
    _u(i+"out<br />");
    }
    -->
    </script>楼主看这个代码就能明白了,其实mouse一直都在触发,所以需要要判定是不是已经出发,如果没有触发再触发
      

  4.   


    <div id="demo" style="background:#E9FDF1;border:1px solid #7CCC99;" onmousemove="leftmouseover()" onmouseout="leftmouseout()">
    <p>无标题文档</p>
    </div>
    <div id="rs" style="background:#E9FDF1;border:1px solid #7CCC99;"></div>
    <script type="text/javascript">
    <!--
    /*
    window.top.frames["index_left"].document.attachEvent("onmouseover",function(){
    left_mouseover();
    });
    window.top.frames["index_left"].document.attachEvent("onmouseout",function(){
    left_mouseout();
    });
    */
    function $(id){return (document.getElementById) ? document.getElementById(id): document.all[id];}
    var i;
    var isLeft;
    i=0
    function _u(msg){
    $("rs").innerHTML+=msg;
    }
    function leftmouseover(){
    try{
    if(isLeft!=true){
    i++;
    _u(i+"over<br />");
    isLeft=true;
    }
    }catch(e){}
    try{window.clearTimeout(timer);}catch(e){}
    }function leftmouseout(){
    try{
    if(isLeft=true){
    i++;
    _u(i+"out<br />");
    timer = setTimeout("setisLeft()", 1000);
    }
    }catch(e){}
    }
    function setisLeft(){
    isLeft=false;
    }
    -->
    </script>
    再看这个