![]()
鼠标事件
![]() " 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 οncοntextmenu="return false" > <input type="button" id="input1" value="save as" οnclick="saveas()"/></td></tr> </table> </div> </p> <table cellpadding="0" cellspacing="0" border="1"> <tr><td οncοntextmenu="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> ![]() |
鼠标事件
最新推荐文章于 2024-08-30 10:01:19 发布