值得收藏的HTML DOM事件和鼠标键盘事件

得收藏的HTML DOM事件和鼠标键盘事件

onabort//图像的加载被中断。

onblur//元素失去焦点。

onchange//域的内容被改变。

onclick//当用户点击某个对象时调用的事件句柄。

ondblclick//当用户双击某个对象时调用的事件句柄。

onerror//在加载文档或图像时发生错误。

onfocus//元素获得焦点。

onkeydown//某个键盘按键被按下。

onkeypress//某个键盘按键被按下并松开。

onkeyup//某个键盘按键被松开。

onload//一张页面或一幅图像完成加载。

onmousedown//鼠标按钮被按下。

onmousemove//鼠标被移动。

onmouseout//鼠标从某元素移开。

onmouseover//鼠标移到某元素之上。

onmouseup//鼠标按键被松开。

onreset//重置按钮被点击。

onresize//窗口或框架被重新调整大小。

onselect//文本被选中。

onsubmit//确认按钮被点击。

onunload//用户退出页面。

值得收藏的HTML DOM事件和鼠标键盘事件

altKey//返回当事件被触发时，"ALT" 是否被按下。

button//返回当事件被触发时，哪个鼠标按钮被点击。

clientX//返回当事件被触发时，鼠标指针的水平坐标。

clientY//返回当事件被触发时，鼠标指针的垂直坐标。

ctrlKey//返回当事件被触发时，"CTRL" 键是否被按下。

metaKey//返回当事件被触发时，"meta" 键是否被按下。

relatedTarget//返回与事件的目标节点相关的节点。

screenX//返回当某个事件被触发时，鼠标指针的水平坐标。

screenY//返回当某个事件被触发时，鼠标指针的垂直坐标。

shiftKey//返回当事件被触发时，"SHIFT" 键是否被按下。

值得收藏的HTML DOM事件和鼠标键盘事件

以上内容为互联网收集感谢关注与收藏

轮事件是不同浏览器会有一点点区别，一个像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法绑定DomMouseScroll事件，其他的浏览器滚轮事件使用mousewheel，下面我来给大家具体介绍。

Firefox使用DOMMouseScroll，其他的浏览器使用mousewheel。滚动事件触发时Firefox使用detail属性捕捉滚轮信息，其他的浏览器使用wheelDelta。不知道为何在该问题上其他厂商和微软的如此一致。Firefox可以使用addEventListener方法绑定DomMouseScroll事件。

elem.addEventListener(‘DOMMouseScroll’, func, false);IE和其他的主流浏览器可以使用传统的事件绑定模型。但不要使用IE专有的attachEvent方法，其他主流浏览器并不识别微软的这个方法。

Firefox 鼠标滚轮向上滚动是-3，向下滚动是3

IE 鼠标滚轮向上滚动是120，向下滚动是-120

Safari 鼠标滚轮向上滚动是360，向下滚动是-360

Opera 鼠标滚轮向上滚动是120，向下滚动是-120

Chrome 鼠标滚轮向上滚动是120，向下滚动是-120

有人在Safari下做了一些测试：”只是滚动一圈的话，值为+-0.1，如果滚动地稍微快点的话（多滚动几圈），这个值也会变大。这是因为Mac OS下有鼠标滚轮加速功能。滚动一次，浏览器滚动1像素，滚动3次，浏览器却滚动30像素”。同时他也对Camino（基于Gecko的内核引擎）进行研究：“与Safari相似（+- 0.3 to +-Infinity），虽然使用了与firefox相同的内核引擎，但结果这个delta值却只在+-2.666666里浮动，无论滚动速度如何

IE/Opera属于同一类型，使用attachEvent即可添加滚轮事件。

/*IE注册事件*/ 
if(document.attachEvent){ 
 document.attachEvent('onmousewheel',scrollFunc); 
}

Firefox使用addEventListener添加滚轮事件

/*Firefox注册事件*/ 
if(document.addEventListener){ 
 document.addEventListener('DOMMouseScroll',scrollFunc,false); 
}

Safari与Chrome属于同一类型，可使用HTML DOM方式添加事件

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

其中除Firefox外其余均可使用HTML DOM方式添加事件，因此添加事件使用以下方式

/*注册事件*/ 
if(document.addEventListener){ 
 document.addEventListener('DOMMouseScroll',scrollFunc,false); 
}//W3C 
window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chromex

下面两个参数可以获取滚动的位置

document.documentElement.scrollTop：垂直方向

document.documentElement.scrollLeft：水平方向

放入监听事件后就可以在鼠标滑轮滚动时给一些元素设置浮动样式

如头条号的发表文章界面:

下滑前

下滑后

标位置可视区位置：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>

自定义鼠标右键

在线咨询

上一篇：JavaScript 如何拖拽元素?
下一篇：程序员都必掌握的前端教程之HTML基础教程（上）

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

值得收藏的HTML DOM事件和鼠标键盘事件

您的项目需求