禁用右键菜单 & 禁止选中文字
1.contextmenu 禁用右键菜单
2.selectstart 禁止选中文字
这是一段不能复制的文字,且禁用了右键菜单 //js代码 // 1. contextmenu 禁用右键菜单 document.addEventListener('contextmenu', function(e){ e.preventDefault() }) // 2. selectstart 禁止选中文字 document.addEventListener('selectstart', function(e){ e.preventDefault() })
鼠标的坐标位置
1.client: 鼠标在可视区的 x 和 y 坐标
2.page: 鼠标在页面文档的 x 和 y 坐标
3.screen: 鼠标在电脑屏幕的 x 和 y 坐标
client 和 page 的区别:
client: 以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.
page: 以页面为参考点,不随滑动条移动而变化
//css代码 body{ height: 3000px; } //js代码 document.addEventListener('click', function(e){ // 1.client 鼠标在可视区的x和y坐标 console.log(e.clientX); console.log(e.clientY); console.log('-------------'); // 2.page 鼠标在页面文档的x和y坐标 console.log(e.pageX); console.log(e.pageY); console.log('-------------'); // 3.screen 鼠标在电脑屏幕的x和y坐标 console.log(e.screenX); console.log(e.screenY); })
跟随鼠标移动效果
鼠标上绑定一个图片,实现图片跟着鼠标走
核心原理: 每次鼠标移动 我们都会获得最新的鼠标坐标 把这个x和y坐标做为图片的top和left值 就可以移动图片
//css代码 img{ position: absolute; } //html代码 <img src="图片.png"> //js代码 var pic = document.querySelector('img') document.addEventListener('mousemove', function(e){ // 1.mousemove 只要我们鼠标移动 就会触发这个事件 // 2.核心原理: 每次鼠标移动 我们都会获得最新的鼠标坐标 把这个x和y坐标做为图片的top和left值 就可以移动图片 var x = e.pageX var y = e.pageY // 3.不要忘记给坐标加px像素 pic.style.left = x-20 + 'px' pic.style.top = y-20 + 'px' })
常用键盘事件
- keyup: 按键 抬起 的时候触发
- keydown: 按键 按下 的时候触发
- keypress: 按键 按下 的时候触发, 不识别 功能按键 ctrl shift 等
- 三个事件的 执行顺序 : keydown – keypress – keyup
// 1.keyup 按键抬起的时候触发 document.addEventListener('keyup', function(){ console.log('键盘已弹起!'); }) // 2.keydown 按键按下的时候触发 document.addEventListener('keydown', function(){ console.log('键盘按下了down!'); }) // 3.keypress 按键按下的时候触发 不识别功能键 ctrl shift等 document.addEventListener('keypress', function(){ console.log('键盘按下了press!'); })
keyCode判断键盘按下的哪个键
利用keyCode返回的ASCII码值来判断按下了哪个键
注意
keyup 和 keydown 事件不区分字母大小写, a 和 A 得到的都是65
keypress 事件区分字母大小写 a 97 和 A 65
//js代码 document.addEventListener('keyup', function(e){ console.log('keyup' + e.keyCode); if(e.keyCode === 65){ alert('按下了a') //A a 65 }else{ alert('没有按下a') } }) document.addEventListener('keypress', function(e){ console.log('press' + e.keyCode); //A 65 a 97 }) //先执行的 keypress 后执行的 keyup //keydown -- keypress -- keyup
不积跬步无以至千里 不积小流无以成江海
