鼠标事件

最新推荐文章于 2025-09-05 14:01:23 发布

原创最新推荐文章于 2025-09-05 14:01:23 发布 · 368 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#function #input #div #class #html #button

.net 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的鼠标事件处理示例，包括鼠标移入、移出及右键点击等事件，通过这些事件实现了弹出层的位置更新等功能。

<!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 || event.button == 0)
   {
      var oDiv = document.getElementById("div1");
      oDiv.style.left = event.clientX - 10;
      // 层的左距离坐标
      oDiv.style.top =  event.clientY - 10;
      // 层的右距离坐标
      oDiv.style.display = "block";
      // oDiv.innerHTML = "没有获取ID";
      divMouseout();
      // return false;
   }
}

// 动态添加控件鼠标事件
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;
         var a = document.getElementById("heid1");
         a.value = temp.value;
      }
   }
   else
   {
      // oDiv.innerHTML = "没有获取ID";
   }
   //  oDiv.style.display = "block";
}
// 离开层时
function divMouseout()
{
   var divObj = document.getElementById("div1");
   divObj.onmouseout = MouseOut;
}
// onmouseOut事件
function MouseOut()
{
   var oDiv = document.getElementById("div1");
   oDiv.style.display = "none";
}
function  saveas()
{
   var a = document.getElementById("heid1");
   alert(a.value);
}
        </script>
        <style type="text/css">
            #div1 {
                background-color: red;
                height: 25px;
                width: 100px;
                position: absolute;
            }
        </style>
    </head>
    <body >
        <p>鼠标事件</p>
        <p><div id="div1" style="display:none ">
        <table>
        <tr><td oncontextmenu="return false" >
        <input type="button" id="input1" value="save as" onclick="saveas()"/></td></tr>
        </table>
  </div> </p>
  <table cellpadding="0" cellspacing="0" border="1">
        <tr><td oncontextmenu="muoseRight();return false" >
        <input type="hidden" id="heid1">
  <input type="text" value="111" type="text"  id="txtShiJ1" class="shijiaos" />
  <input type="text" value="222" type="text"  id="txtShiJ2" class="shijiaos"  />
        </td></tr></table>
    </body>
</html>