1.键盘及滚轮事件
1.1键盘事件
-
onkeydown
-
键盘按下的时候触发,键盘上任何一个键都可以触发该事件 不区分大小写 返回的是大写的字符编码
-
-
onkeyup
-
键盘抬起的时候触发
-
-
onkeypress
-
键盘按下的时候触发 键盘上的特殊字符无法触发该事件 区分大小写 返回的是大写和小写的字符编码
-
document.documentElement.onkeydown = function(eve){ var ev = window.event|| eve console.log("按下"); console.log(ev.key);//标准浏览器: 键盘上具体的字符 IE低版本:undefined console.log(ev.keyCode);// ASCII码 不区分大小写,返回大写的字符编码 } document.documentElement.onkeyup = function(){ console.log("抬起") } document.documentElement.onkeypress = function(eve){ var ev = window.event || eve; console.log(ev.key);// 键盘上具体的字符 console.log(ev.keyCode);//ASCII码 区别大小写 但是不能输出特殊字符 } </script>
1.2滚轮事件
-
添加滚轮事件
-
标准浏览器/IE浏览器:元素.onmousewheel
-
火狐浏览器:元素.DOMMouseScroll
-
-
获取滚轮的方向
-
标准浏览器/IE浏览器:ev.wheelDelta
-
向前 180/120 >0
-
向后 -180/-120 <0
-
-
火狐浏览器 ev.detail
-
向前 -3 <0
-
向后 3 >0
-
-
//标准浏览器绑定滚轮事件 document.documentElement.onmousewheel = function (eve) { var ev = window.event || eve; if(ev.wheelDelta > 0){ console.log("向前") }else if(ev.wheelDelta<0){ console.log("向后") } console.log("标准浏览器和IE",ev.wheelDelta); } //火狐浏览器绑定滚轮事件 addEventListener在IE低版本下不兼容 if (document.documentElement.addEventListener) { document.documentElement.addEventListener("DOMMouseScroll", function (eve) { var ev = window.event || eve; if(ev.detail <0){ console.log("向前") }else if(ev.detail>0){ console.log("向后") } console.log("火狐浏览器",ev.detail) }) }
-
滚轮事件函数兼容
function mousewheel(elem, upFunction, downFunction) { function scroll(eve) { var ev = window.event || eve; var tag = true;// true向前 false向后 // 判断滚轮的方向 if (ev.wheelDelta) { //标准浏览器的滚轮方向 180/120 向前 -180/-120 向后 tag = ev.wheelDelta > 0 ? true : false } else {//火狐浏览器的滚轮方向 -3向前 3向后 tag = ev.detail < 0 ? true : false } if (tag) { //滚轮向前做的事情 upFunction(); } else { //滚轮向后做的事情 downFunction(); } } // 标准浏览器添加滚轮事件 elem.onmousewheel = scroll // 火狐浏览器添加滚轮事件 if (elem.addEventListener) { elem.addEventListener("DOMMouseScroll", scroll) } }
2.拖拽效果
-
实现效果:在页面中拖动盒子 鼠标在哪 盒子就在哪
<body> <div></div> <script> /* 1.给元素添加鼠标按下事件 2.给页面添加移动事件 3.给元素添加鼠标抬起事件 */ var oDiv = document.getElementsByTagName("div")[0]; // 给元素添加鼠标按下事件 oDiv.onmousedown = function (eve) { // 给页面添加移动事件 document.documentElement.onmousemove = function (eve) { var ev = window.event || eve; oDiv.style.left = ev.clientX + "px"; oDiv.style.top = ev.clientY + "px"; } // 当鼠标抬起的时候 清空移动事件 oDiv.onmouseup = function () { document.documentElement.onmousemove = null; } } </script> </body>
-
问题1:在div内部按下鼠标失效
<body> <div></div> <script> /* 1.给元素添加鼠标按下事件 2.给页面添加移动事件 3.给元素添加鼠标抬起事件 */ var oDiv = document.getElementsByTagName("div")[0]; // 给元素添加鼠标按下事件 oDiv.onmousedown = function (eve) { /* 问题1:在div内部按下鼠标失效 解决方法 用鼠标位置-元素在页面中的位置即可 */ var ev = window.event || eve; var moveTop = ev.clientY - oDiv.offsetTop; var moveLeft = ev.clientX -oDiv.offsetLeft; // 给页面添加移动事件 document.documentElement.onmousemove = function (eve) { var ev = window.event || eve; oDiv.style.left = ev.clientX - moveLeft + "px"; oDiv.style.top = ev.clientY -moveTop + "px"; } // 当鼠标抬起的时候 清空移动事件 oDiv.onmouseup = function () { document.documentElement.onmousemove = null; } } </script> </body>
-
问题2:在拖动盒子之前不小心选择了文字,在不取消选中文字的情况下又去拖动盒子 会发现拖动是文字内容
-
原因:文字默认行为的问题
-
解决:阻止默认行为
-
<script> /* 1.给元素添加鼠标按下事件 2.给页面添加移动事件 3.给元素添加鼠标抬起事件 */ var oDiv = document.getElementsByTagName("div")[0]; /* 问题2:在拖动盒子之前不小心选择了文字,在不取消选中文字的情况下又去拖动盒子 会发现拖动是文字内容 原因:文字默认行为的问题 解决:阻止默认行为 */ // 给元素添加鼠标按下事件 oDiv.onmousedown = function (eve) { var ev = window.event || eve; var moveTop = ev.clientY - oDiv.offsetTop; var moveLeft = ev.clientX - oDiv.offsetLeft; // 给页面添加移动事件 document.documentElement.onmousemove = function (eve) { var ev = window.event || eve; oDiv.style.left = ev.clientX - moveLeft + "px"; oDiv.style.top = ev.clientY - moveTop + "px"; } // 当鼠标抬起的时候 清空移动事件 oDiv.onmouseup = function () { document.documentElement.onmousemove = null; // 全局捕获用不到的时候 一定要释放掉 if (oDiv.releaseCapture) { oDiv.releaseCapture() }; } // 给div添加全局捕获 优先执行自己的事件 这个可以解决IE阻止默认行为的bug if (oDiv.setCapture) { oDiv.setCapture() }; // 阻止默认行为 但是IE低版本无法使用return false阻止默认行为 return false; } </script>
3.IE的全局捕获
-
什么是IE的全局捕获
-
全局捕获:当在页面中执行事件的时候 添加全局捕获的元素会截取事件 触发自己的东西
-
-
给元素设置全局捕获:元素.setCapture();
-
元素释放全局捕获:元素.releaseCapture();
<script> var btn = document.getElementsByTagName("button"); btn[0].onclick = function () { alert("按钮1"); //释放全局捕获 不用的时候 一定要释放 btn[0].releaseCapture() } btn[1].onclick = function () { alert("按钮2") } // 给按钮1添加全局捕获 // 全局捕获:当在页面中执行事件的时候 添加全局捕获的元素会截取事件 触发自己的东西 // 如果该元素添加全局捕获 全局捕获截取的事件 优先级高于默认事件 // 全局捕获 点击页面的任何地方都会触发该事件 btn[0].setCapture(); </script>
4.碰撞检测
-
判断水平方向的危险区域 假设拖拽盒子水平方向的位置值 l
-
危险区域 a < l < b
-
大盒子的offsetLeft - 小盒子的offsetWidth < l < 大盒子的offsetLeft + 大盒子的offsetWidth
-
-
判断垂直方向的危险区域 假设拖拽盒子垂直方向的位置 t
-
危险区域 x < t < y
-
大盒子的offsetTop - 小盒子的offsetHeight < t < 大盒子的offsetTop + 大盒子的offsetHeight
-
<div>大盒子危险区域</div> <div>小盒子</div> <script> var oDiv = document.getElementsByTagName("div"); var bigBox = oDiv[0]; //危险区域盒子 var smallBox = oDiv[1];// 拖拽的盒子 //1.当鼠标按下拖拽小盒子 smallBox.onmousedown = function (eve) { var ev = window.event || eve; var moveTop = ev.clientY - smallBox.offsetTop; var moveLeft = ev.clientX - smallBox.offsetLeft // 页面添加移动 document.documentElement.onmousemove = function (eve) { var ev = window.event || eve; //水平方向危险区域 var a = bigBox.offsetLeft - smallBox.offsetWidth; var b = bigBox.offsetLeft + bigBox.offsetWidth; //垂直方向的危险区域 var x = bigBox.offsetTop - smallBox.offsetHeight; var y = bigBox.offsetTop + bigBox.offsetHeight; var l = ev.clientX - moveLeft; // l和f就是拖拽元素的位置 var t = ev.clientY - moveTop; // a < l < b 转成代码公式判断 a < l && l<b // x < t < y 转成代码公式判断 x < t && t<y if (a < l && l < b && x < t && t < y) { console.log("危险区"); bigBox.style.backgroundColor = "red"; } else { console.log("安全区"); bigBox.style.backgroundColor = "#ccc"; } smallBox.style.left = l + "px"; smallBox.style.top = t + "px"; } //鼠标抬起 清除页面移动事件 smallBox.onmouseup = function () { document.documentElement.onmousemove = null; // 不用全局捕获的时候 一定要释放掉 if (smallBox.releaseCapture) { smallBox.releaseCapture() } } // 给IE添加全局捕获 利用全局捕获阻止默认行为 if (smallBox.setCapture) { smallBox.setCapture() }; //阻止默认行为 但是IE低版本无法使用 return false; } </script>