js中一些滑鼠事件

來源:互聯網
上載者:User
<A href="tencent://message/?uin=16769711&amp;Site=Antu&amp;Menu=yes"
>有事Q我</A>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>馬國福 測試關於滑鼠事件</title>
</head>
 <script type="text/javascript">
   window.onload=displayDiv;//頁面載入時
   document.oncontextmenu=function(){return false;}//屏蔽滑鼠右鍵
   document.onmousedown=muoseRight;
   //滑鼠右擊時
   function muoseRight()
   {
    if(event.button==2)
    {      
     var oDiv = document.getElementById("div1");    
     oDiv.style.left = event.clientX;//層的左距離座標
     oDiv.style.top =  event.clientY;//層的右距離座標
     oDiv.style.display="block";
     //oDiv.innerHTML="沒有擷取ID";
     divMouseover();     
    }
   }  
   //離開層時 
   function divMouseover()
   {
    var divObj= document.getElementById("div1");
    divObj.onmouseout=MouseOut;    
   }
   
   //動態添加控制項滑鼠事件
   function displayDiv()
    {              
    var inps=document.getElementsByTagName("input");             
    for(var i =0;i<inps.length;i++)
    {
     var note = inps[i];    
     if(note && note.className=="shijiaos")
     {
      note.onmouseover=MouseOver;
      note.onmouseout=MouseOut;  
     }   
    }
     }
     //滑鼠移動到層時
            function MouseOver()
   {  
    var note=this.id;    
                var oDiv = document.getElementById("div1");    
                oDiv.style.left = event.clientX;//層的左距離座標
                oDiv.style.top =  event.clientY;//層的右距離座標
    if(note)
    {
     var temp = document.getElementById(note);
     if(temp)
     {
      oDiv.innerHTML=temp.value;
     }
    }
    else
    {
     //oDiv.innerHTML="沒有擷取ID";
    }
    oDiv.style.display="block";
            }
   //onmouseOut事件
   function MouseOut()
   {
    var oDiv = document.getElementById("div1");
    oDiv.style.display="none";
   }
                                 
        </script>
        <style type="text/css">
            #div1 {
                background-color: red;
                height: 100px;
                width: 200px;
                position: absolute;
            }
        </style>
    </head>
    <body >
        <p>滑鼠事件</p>
        <p><div id="div1" style="display:none ">
  <a href="http://www.google.cn" target="_blank">www.google.cn</a>
  </div> </p>       
  <input type="text" value="111" type="text"  id="txtShiJ1" class="shijiaos" />
  <input type="text" value="222" type="text"  id="txtShiJ2" class="shijiaos"  />
    </body>
</html>

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.