鼠标位置 可视区位置：clientX、clientY
滚动条的意义——可视区与页面顶部的距离
例子1：跟随鼠标的Div 消除滚动条的影响
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:200px; background:red; position:absolute;}
</style>
<script>
function getPos(ev)
{
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop}; //消除滚动条的影响
}
document.onmousemove=function (ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
var pos=getPos(oEvent);
oDiv.style.left=pos.x+'px';
oDiv.style.top=pos.y+'px';
};
</script>
</head>
<body style="height:2000px;">
<div id="div1"></div>
</body>
</html>实例2:一串跟随鼠标的Div
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {width:10px; height:10px; background:red; position:absolute;}
</style>
<script>
function getPos(ev)
{
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}
document.onmousemove=function (ev)
{
var aDiv=document.getElementsByTagName('div');
var oEvent=ev||event;
var pos=getPos(oEvent);
for(var i=aDiv.length-1;i>0;i--)
{
aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
}
aDiv[0].style.left=pos.x+'px';
aDiv[0].style.top=pos.y+'px';
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
</html>实例3：屏蔽鼠标右键
方法1：使用鼠标事件的button属性
鼠标事件中button的值在各个浏览器上大相径庭,但非常幸运的是按下鼠标右键时值都为2;
<html>
<head>
<title>屏蔽鼠标右键</title>
<script language="javascript">
function block(oEvent){
if(window.event)
oEvent = window.event;
if(oEvent.button == 2)
alert("鼠标右键不可用");
}
document.onmousedown = block;
</script>
</head>
<body>
<p>屏蔽鼠标右键</p>
</body>
</html>
Firefox旧版本不支持,经过严格测试,最新版本的IE、360、Firefox浏览器都已支持
方法二:(以下火狐和chome浏览器不支持,IE和360支持)
<body oncontextmenu="return false;">
</body>
<body oncontextmenu="alert('010-123456789');return false">
</body>
<body oncontextmenu="return test()">
<script>
function test(){
alert('010-123456789');
return false;
</script>
</body>方法三：浏览器兼容性最好,不用弹出警告框, 推荐使用
<html>
<head>
<title>屏蔽鼠标右键</title>
<script language="javascript">
function block(oEvent){
if(window.event){
oEvent = window.event;
oEvent.returnValue = false; //取消默认事件,兼容IE8以下浏览器
}else
oEvent.preventDefault(); //取消默认事件,兼容标准的DOM浏览器,IE9浏览器已支持
}
document.oncontextmenu = block;
</script>
</head>
<body>
<p>屏蔽鼠标右键</p>
</body>
</html>自定义鼠标右键
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
height: 3000px;
background-image: linear-gradient(red,green,pink,blue,orange,purple);
}
ul{
width: 160px;
border: 1px solid #000;
position: fixed;
left: 0px;
top: 0px;
display: none;
background-color: #fff;
}
ul>li{
width: 150px;
height: 40px;
line-height: 40px;
cursor: pointer;
font-size: 14px;
padding: 0 5px;
border-bottom: 1px dotted #666;
}
ul>li:hover{
color: #f0f0f0;
background-color: #666;
}
</style>
</head>
<body>
<ul>
<li>查看</li>
<li>排序</li>
<li>刷新</li>
<li>新建</li>
<li>删除</li>
</ul>
<script type="text/javascript">
var ul = document.getElementsByTagName("ul")[0];
document.oncontextmenu = function(e){
var ev = e || window.event;//事件对象的兼容
//鼠标位置距离可视区的位置
var left = ev.clientX;
var top = ev.clientY;
//设置ul的left值和top值等于鼠标的位置
ul.style.left = left + "px";
ul.style.top = top + "px";
ul.style.display = "block";
//阻止默认行为
if(ev.preventDefault){
ev.preventDefault();
}else{
ev.returnValue = false;
}
}
document.onclick = function(){
ul.style.display = "none";
}
</script>
</body>
</html>
本文暂时没有评论，来添加一个吧(●'◡'●)