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

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


一、鼠标位置帮助实例

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

<!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



二、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" 字符串!







  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值