JavaScript_跟着鼠标飞的天使_事件冒泡参数_取消默认行为的执行_鼠标在盒子中的位置_键盘事件_Unit_11;

本文链接：https://blog.csdn.net/qq_38053395/article/details/81875708

Topic 1 ：跟随的天使

screenX:鼠标位置相对于用户屏幕水平偏移量，而screenY也就是垂直方向的，此时的参照点也就是原点是屏幕的左上角。

clientX:跟screenX相比就是将参照点改成了浏览器内容区域的左上角，该参照点会随之滚动条的移动而移动。

pageX：参照点也是浏览器内容区域的左上角，但它不会随着滚动条而变动始终是浏览器最上面的左上角

直接把鼠标的坐标给天使就行了，e.clientX(Y) 或者 e.pageX(Y)

有滚动条用pageX（Y）就行了

注意用到e就有兼容性问题：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>跟随的天使</title>
 <style>
/*
    body {
      height: 1000px;
    }
*/
  </style>
</head>
<body>
<!--  <div>123</div>-->
  <img id="img" src="../images/tianshi.gif" alt="">

  <script>
    // body的有效范围，是body内部元素的范围
		// 所以下面这个我们不能用body.onmousemove 
    var img = document.getElementById('img');
		// 注意这个事件是onmousemove  而不是onmouseover
    document.onmousemove = function (e) {
      console.log('abc');
      e = e || window.event;

      img.style.position = 'absolute';

//      // clientX / clientY  获取的是鼠标在可视区域中的位置
//      img.style.left = e.clientX + 'px';
//      img.style.top = e.clientY + 'px';

      // 获取鼠标在页面中的位置
       img.style.left = e.pageX + 'px';
       img.style.top = e.pageY + 'px';
    }
  </script>
</body>
</html>

two ：有滚动条的情况下

因为有兼容性的问题 ie8的时候没有pageX 所以我们要自己算pageX

我们可以算出来鼠标的坐标就是滚动条的位置加上e.client

滚动出去的部分：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>跟东出去的部分</title>
<style>
    body {
      height: 1500px;
    }
  </style>
</head>
<body>
   
  <script>
    // 获取页面滚动出去的距离
    // document.documentElement  文档的根元素
//		要获取当前页面的滚动条纵坐标位置，用：
//		document.documentElement.scrollTop;
    window.onscroll = function () {
      console.log('documentElement' + document.documentElement.scrollTop);
      //console.log('body' + document.body.scrollTop);
    }

    // chrome 和 IE11 有兼容性问题

    // 获取页面滚动出去的距离。处理兼容性
    function getScroll() {
      return {
        scrollTop: document.documentElement.scrollTop || document.body.scrollTop,
        scrollLeft: document.documentElement.scrollLeft || document.body.scrollLeft
      }
    }
		
		//  我们在这里获得了滚动条的位置那么我们在加上e.client就可以获得鼠标位置的坐标那么我们就可以再有滚动条的情况下
		//  让我们的天使跟着鼠标走
    
    
  </script>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>follow天使</title>
	<style type="text/css">
		body {
			height: 1500px;
		}
	</style>
</head>

<body>
	<image id="img" src="../images/tianshi.gif"></image>
	<script src="../js/common.js"></script>
	<script>
		var img = document.getElementById('img');
		//  我们获取鼠标的坐标  要使用document.onmousemove
		document.onmousemove = function (e) {
			// 想让天使获得鼠标的坐标  先要脱离文档流
			img.style.position = 'absolute';
			// 用到e我们呢就会想到兼容性问题
			e = e || window.event;
			// 把鼠标的坐标给img
			// 还有一点要特别注意就是我们属性设置一定要加单位
			// 注意横纵坐标
			img.style.top = getPage(e).pageY + 'px';
			img.style.left = getPage(e).pageX + 'px';
		}
	</script>
</body>
</html>

Topic 2 ：事件冒泡参数

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>事件冒泡参数</title>
  <style>
    #box1 {
      width: 300px;
      height: 300px;
      background-color: red;
    }

    #box2 {
      width: 200px;
      height: 200px;
      background-color: blue;
    }

    #box3 {
      width: 100px;
      height: 100px;
      background-color: yellow;
    }
  </style>
</head>
<body>
  <div id="box1">
    <div id="box2">
      <div id="box3"></div>
    </div>
  </div>
  <script>
    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    var box3 = document.getElementById('box3');
    

    var array = [box1, box2, box3];

    array.forEach(function (item) {

      item.addEventListener('click', function (e) {
        // eventPhase 事件的阶段   
        // 1 捕获阶段  2 目标阶段  3 冒泡阶段
        // console.log(e.eventPhase);

        // target 始终是点击的那个元素
        console.log('target  ' + e.target.id);
        // currentTarget 调用事件处理函数的元素
        console.log('currentTarget  ' + e.currentTarget.id);
        // this跟currentTarget一样 是调用事件处理函数的元素
        console.log('this ' + this.id);

        // 阻止事件冒泡   添加上他以后上面三个就是一样的了
        e.stopPropagation();
      }, false);

    });


  </script>
</body>
</html>

Topic 3 ：取消默认行为的执行

<body>
  <a id="link" href="http://www.baidu.com">baidu</a>
  <script>
    var link = document.getElementById('link');
    link.onclick = function (e) {

      alert('点击了');
      // 阻止默认行为的执行
			//这里是组织了跳转到百度  我们上一次做了一个移除事件
			//我们那个移除事件指的是只让那个事件执行一次  详情可以看上一篇博客

      //return false;

      e.preventDefault();
    }
  </script>
</body>

Topic 4 ：鼠标盒子中的位置

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>获得鼠标在盒子中的位置</title>
	<style type="text/css">
		#box {
			height: 200px;
			width: 200px;
			border: 1px red solid;
			padding: 0px;
			margin: 200px;
		}
	</style>
</head>

<body>
	<div id="box">
		
	</div>
	<script src="../js/common.js"></script>
	<script>
		// 获得鼠标在盒子中的位置  
		// 思路就是  我们先或得鼠标在页面中的位置  然后或得盒子的坐标  我们用页面中的位置减去合作的位置就得到我们想要的了
		// 1.获得盒子的位置
		var box = document.getElementById('box');
		box.onmousemove = function (e) {
			// 看到e就想到了兼容性问题
			e = e || window.event; 
			//  this.style 获取的仅仅是标签的style中设置的样式属性 id 和类选择器的都获取不出来  必须是在标签里面写的style样式
			// 如果标签没有设置style属性，此时获取到的都是空字符串
//			 console.log(this.style.width);
			
			// 获取元素的偏移量（坐标）
//       console.log(this.offsetLeft);
//       console.log(this.offsetTop);
			// 我们这里还有offsetHeight元素的宽度和高度
//			console.log(this.offsetHeight);
//			console.log(this.offsetWidth);
			
			 // 鼠标在页面中的位置
      var pageX = getPage(e).pageX;
      var pageY = getPage(e).pageY;
			
			// 鼠标减去盒子
			console.log(pageX - this.offsetLeft);
			console.log(pageY - this.offsetTop);
		}
		
		
		
	
	</script>
</body>
</html>

Topic 5：键盘事件

键盘码和ASC码几乎是对应的但是呢我们键盘小键盘那里的数字和ASC码就不对应了，因为我们还有一行数字键，F几下面哪一行；

<body>
  <input type="text" id="txt">

  <script>
    var txt = document.getElementById('txt');

    txt.onkeydown = function (e) {
      // 键盘码
      console.log(e.keyCode);
			// 判断按下的是不是a  要是的话就不执行  a就输不上去
			// 我们的键盘吗不用记忆  因为我们忘了的话可以直接打印出来看一下
      // if (e.keyCode === 65) {
      //   return false;
      // }
      // 判断按下的键是否是数字，如果不是数字，取消后续内容的执行
			// 注意这里的8是退格  我们是可以退格的   //a  65
      if ((e.keyCode < 48 || e.keyCode > 57) && e.keyCode !== 8)  {
        // return false;
        e.preventDefault();
      }
    }


   
  </script>

</body>