JS —— 鼠标位置与相关属性及 js undefined 与 null 区别

末蓝、 2022-06-08 20:11 174阅读 0赞

一直理不清鼠标位置相关属性，在此整理下，彻底理解！

**一、鼠标位置帮助实例**

运行此实例，关于鼠标位置的相关问题将不再是问题！

<!DOCTYPE html>
    <html>
    <head>
    	<title>鼠标位置</title>
    	<meta charset="utf-8">
    	<style type="text/css">
    		body{
    			background-color: pink;
    			width:150%;
    			height: 1500px;
    		}
    		p + p{
    			text-indent: 2em;
    		}
    		fieldset{
    			width: 200PX;
    			margin-left: 200px;
    		}
    	</style>
    	<script>
    		window.onload = function(){
    			document.getElementsByTagName("body")[0].onmousemove = move;
    		};
    		function move(ev){
    			var ev = window.event || ev;
    			document.getElementById("CX").value= ev.clientX;
    			document.getElementById("CY").value= ev.clientY;
    			document.getElementById("SX").value= ev.screenX;
    			document.getElementById("SY").value= ev.screenY;
    			document.getElementById("SCLX").value= window.scrollX;
    			document.getElementById("SCLY").value= window.scrollY;
    			document.getElementById("POX").value= window.pageXOffset;
    			document.getElementById("POY").value= window.pageYOffset;
    			document.getElementById("SCL").value = (document.documentElement || document.body.parentNode || document.body).scrollLeft;
    			document.getElementById("SCT").value = (document.documentElement || document.body.parentNode || document.body).scrollTop;
    		}
    
    	</script>
    </head>
    <body>
    	<p>结论：</p>
    	<p>ev.clientXY是html区域相对于browser屏幕左上角的位置，即原点在浏览器窗口的html区域的左上角；</p>
    	<p>ev.screenXY是电脑屏幕区域相对于屏幕的左上角的位置，即原点在电脑屏幕左上角，可将浏览器窗口缩小观察数值；</p>
    	<p>window.scrollXY是html滚动后消失的左边及上边宽度；</p>
    	<p>window.pageXYOffset和window.scrollXY相同，MSDN建议用此属性替代scrollXY解决部分兼容问题；</p>
    	<p>document....scrollTop|scrollLeft与window.scrollXY、window.pageXYOffset相同。</p>
    	<fieldset>
    		<legend>鼠标clientXY位置</legend>
    		<label>X:<input id="CX" type="text"  readonly></label><br/>
    		<label>Y:<input id="CY" type="text"  readonly></label><br/>
    	</fieldset>
    	<fieldset>
    		<legend>鼠标screenXY位置</legend>
    		<label>X:<input id="SX" type="text"  readonly></label><br/>
    		<label>Y:<input id="SY" type="text"  readonly></label><br/>
    	</fieldset>
    	<fieldset>
    		<legend>scrollXY位置</legend>
    		<label>X:<input id="SCLX" type="text"  readonly></label><br/>
    		<label>Y:<input id="SCLY" type="text"  readonly></label><br/>
    	</fieldset>
    	<fieldset>
    		<legend>pageXYOffsetXY位置</legend>
    		<label>X:<input id="POX" type="text"  readonly></label><br/>
    		<label>Y:<input id="POY" type="text"  readonly></label><br/>
    	</fieldset>
    	<fieldset>
    		<legend>scrollTop|Left位置</legend>
    		<label>X:<input id="SCL" type="text"  readonly></label><br/>
    		<label>Y:<input id="SCT" type="text"  readonly></label><br/>
    	</fieldset>
    </body>
    </html>

上面涉及到事件属性clientXY、screenXY，及window 对象属性scrollXY、pageXYOffset，及非标准的scrollTop、scrollLeft属性。除了这些属性外，还有一些不是那么关键的属性（都是自己测试过的）。

**非关键属性：**

html文档实际宽高：document.body.clientWidth、document.body.clientHeight；

html文档实际宽高（同上）：document.body.offsetWidth、document.body.offsetHeight；

html正文全文宽高（同上）：document.body.scrollWidth、document.body.scrollHeight。

实际上上面三个属性值都相同，都是html 文档的实际宽高，假设电脑分辨率为1365\*768，html网页大小为2000\*500，则上面三对属性的值都是2000、500.

（注意设置body 的背景色后，是在整个可见区域设置，无论body 实际大小为多少）

**获取鼠标相对于html 文档左上角的位置：**

<!DOCTYPE html>
    <html>
    <head>
      <title>鼠标在html中点击位置</title>
      <meta charset="utf-8">
      <style type="text/css">
        body{
          width:2000px;
          height: 1000px;
        }
      </style>
      <script type="text/javascript">
    
          window.onload = function(){
              document.body.onclick = getMousePos;
          };
          function getMousePos(ev){
    
              var event = window.event || ev;
              var hideLeft = (document.documentElement || document.body.parentNode || document.body).scrollLeft;
              var hideTop =  (document.documentElement || document.body.parentNode || document.body).scrollTop;
              var x = hideLeft + event.clientX;
              var y = hideTop + event.clientY;
              alert("X:"+x+","+"Y:"+y);
          }
      </script>
    </head>
    <body>
    
    </body>
    </html>

**注意事项：**

1、ev.clientXY与ev.screenXY能获取到的最大值，可能比显示器少二三十或更多px，因为鼠标能移动的范围比显示器小。但这并不会影响获取相对于文档的位置的准确性，因为scrollLeft|Top、ev.clientXY都是相对于显示器（或屏幕）的左与上边缘。

2、此外，应注意浏览器的滚动条是不包含在这些宽高中的，所以不用考虑其影响。（经过实践，最多多个5\*5px的区域）。

3、因为clientXY、screenXY是事件属性，所以必须通过事件来获取鼠标的位置。

更多属性可参考：[http://blog.sina.com.cn/s/blog\_78106bb1010116ub.html][http_blog.sina.com.cn_s_blog_78106bb1010116ub.html]

**二、window.event || ev 说明**

有的游览器是通过window.event 来传递事件的，而有的没有定义window.event ，所以此语句是为了保证事件能被正确传递。

JS 中undefined 的变量或属性与某定义的变量或属性（无论什么类型），结果将是该定义了 的变量或属性。

**三、关于JS 的undefined 与null ：**

var announceNotDefined;
    alert(announceNotDefined==null);//提示true
    alert(announceNotDefined==undefined);//提示true
    var announceDefined = "abc";
    alert(announceDefined==null);//提示false
    announceDefined = null;
    alert(announceDefined==null);//提示true
    alert(a == undefined);//什么都没提示，出错

**结论：**

1、JS 中null 就相当于undefined，只不过null 和Java 一样，用来清空变量；

2、判断变量是否为空可用==undefined 或==null；

3、JS 中变量虽然可不用声明直接使用，但条件判断中却不能使用未声明的变量（如上面最后一个判断）；

4、如果要严格区别undefined 与null ，可用完全等于（===）。

var varA;
    var varB=null;
    alert(varA === undefined);//true
    alert(varA === null);//false
    alert(varB === null);//true
    alert(varB === undefined);//false

另外，最基础也很重要的一点，undefined 是JS 关键字，区别于 "undefined" 字符串！

[http_blog.sina.com.cn_s_blog_78106bb1010116ub.html]: http://blog.sina.com.cn/s/blog_78106bb1010116ub.html