鼠标事件获取鼠标坐标

<!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>
	<title>基本选择器</title>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
   <meta name="author" content="" />
   <meta name="keywords" content="" />
   <meta name="description" content="" />
   <style type="text/css">

     #d1{
     background-color: black;
     height: 300px;
     color: white;
     cursor: crosshair;	
     }
   </style>
   <script type="text/javascript">
      function fn(e){
      	var x = e.clientX;
      	var y = e.clientY;
      	var obj = document.getElementById("d1");
      	obj.innerHTML = x+","+y;

      }
   </script>
</head>
<body>
 <div>
  <div id="d1"  onmousemove="fn(event)">
  	 这是汉字
  	 <p>这是段落</p>
  </div>
  </div>
</body>
</html>


鼠标事件:

onclick:点击事件
onmouseover:鼠标放上
onmouseout:鼠标离开
ondbclick:双击

onmousedown: 鼠标按下
onmouseup: 鼠标抬起
onmousemove: 鼠标移动。

 键盘事件
        OnkeyDown:键盘按下
        OnkeyUp:键盘抬起
        OnkeyPress:按键一次
 表单事件
        Onsubmit:表单提交事件
        Onreset:重置事件
        Onfocus:获得焦点
        Onblur:失去焦点
 窗口事件
      1)Onload,在网页一打开的时候发生(注意:必须是把所有东西都加载完成之后)
      <body onload=”init()”>
      </body>
 2)window.onload=init注意:函数名init之后没有括号
Event:是指之事件发生的时候(事件源)相关的一些信息
    clientX:获得鼠标的X坐标
    clientY:获得鼠标的Y坐标
event.target:事件源





展开阅读全文

没有更多推荐了,返回首页