您现在的位置是：主页 > news > 南山做网站关于枪/全网营销系统
南山做网站关于枪/全网营销系统
admin2025/6/15 21:42:15【news】
简介南山做网站关于枪,全网营销系统,frontpage怎样做网站,昆山广告设计公司禁止选中文字和禁止右键菜单 1.禁止鼠标右键菜单 contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单 document.addEventListener(contextmenu, function(e) { e.preventDefault(); }) 2.禁止鼠标选中（selectstart 开始选…
禁止选中文字和禁止右键菜单
1.禁止鼠标右键菜单
contextmenu主要控制应该何时显示上下文菜单，主要用于程序员取消默认的上下文菜单
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
})2.禁止鼠标选中（selectstart 开始选中）
document.addEventListener('selectstart', function(e) {e.preventDefault();})正常情况下：我们可以右击菜单和选中文字，但是当我们阻止了它的默认事件，它将无法右键和选中
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body>选不中的文字<script>// 1.contextmenu 我们可以禁止右键菜单document.addEventListener('contextmenu',function(e){e.preventDefault();});// 2.禁止选中文字 selectstartdocument.addEventListener('selectstart',function(e){e.preventDefault();})</script></body>
</html>
获得鼠标在页面中的坐标
event对象代表事件的状态，跟事件相关的一系列信息的集合。现阶段我们主要是用鼠标事件对象 MouseEvent 和键盘事件对象 KeyboardEvent。
clientX就是画红色的范围
page鼠标在页面文档的x和y坐标
console.log(e.pageX)console.log(e.pageY)跟随鼠标的天使
让天使图片随鼠标一起动
案例分析
① 鼠标不断的移动，使用鼠标移动事件： mousemove
② 在页面中移动，给document注册事件
③ 图片要移动距离，而且不占位置，我们使用绝对定位即可
④ 核心原理： 每次鼠标移动，我们都会获得最新的鼠标坐标， 把这个x和y坐标做为图片的 top和left 值就可以移动图片
现在图片是无法移动的，这是因为top:50px 而我们只不过是给了它50却没有给他px
现在图片是能以移动了，但是在鼠标的左上角
这样就可以了。
代码
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>img{position: absolute;}</style></head><body><img src="img/angel.gif" alt="" srcset=""><script>var pic=document.querySelector('img')document.addEventListener('mousemove',function(e){// 1.mousemove只要鼠标移动，都会触发这个事件var x=e.pageX;var y=e.pageY;pic.style.left=x-50+'px';pic.style.top=y-40+'px';});</script></body>
</html>
