概述
目录
鼠标的单击事件
鼠标的松开或按下事件
鼠标的移入/移出事件
鼠标移动事件
鼠标单击事件和鼠标双击事件
鼠标拖拽事件
鼠标和键盘事件是在页面操作中使用最频繁的操作，可以利用鼠标事件在页面中实现鼠标移动、单击时的特殊效果，也可以利用键盘来制作页面的快捷键等。
鼠标的单击事件
单击事件（onclick）是在鼠标单击时被触发的事件。单击是指鼠标停留在对象上，按下鼠标键，在没有移动鼠标的同时释放鼠标键的这一完整过程。
单击事件一般应用于 Button 对象、Checkbox 对象、Image 对象、Link 对象、Radio 对象、Reset对象和Submit对象，Button 对象一般只会用到 onclick事件处理程序，因为该对象不能从用户那里得到任何信息，如果没有onclick事件处理程序，按钮对象将不会有任何作用。
注意：
在使用对象的单去事作时，如果在对象上按下鼠标健，然后移动鼠标到对象外再松开鼠标,单击事件无效。单击事件必须在对象上按下松开后，才会执行单击事件的处理程序。
例子： 通过按钮变换背景颜色。
本实例通过单击“变换背景”按钮，动态地改变页面的背景颜色，当用户再次单击按钮时，页面背景将以不同的颜色进行显示。
代码如下：
<html>
<head>
<meta charset="utf-8">
<title></title>
<script language="JavaScript">
var arraycolor=new Array("olive","teal","red","blue","maroon","navy");
var n=0;
function turncolors(){
if(n==(arraycolor.length-1)) n=0;
n++;
document.bgColor=arraycolor[n];
}
</script>
</head>
<body>
<input type="button" name="Submit" value="背景变色" onclick="turncolors()"/>
</body>
</html>
演示效果：
鼠标的松开或按下事件
鼠标的按下或松开事件分别是onmousedown和onmouseup事件。其中，onmousedown事件用于在鼠标按下时触发事件处理程序，onmouseup 事件是在鼠标松开时触发事件处理程序。在用鼠标单击对象时，可以用这两个事件实现其动态效果。
例子：用事件制作超链接文本
本实例是用onmousedown和onmouseup事件将文本制作成类似于<a> (超链接)标记的功能，也就是在文本上按下鼠标时，改变文本的颜色，当在文本上松开鼠标时，恢复文本的默认颜色，井弹出一个空页(可以链接任意网页)。 运行结果如图所示。
代码：
<html>
<head>
<meta charset="utf-8">
<title></title>
<script language="JavaScript" type="text/javascript">
function mousedown(event){ //设置鼠标按下时的颜色
var e=window.event;
var obj=e.srcElement;
obj.style.color='red';
}
function mouseup(event){ //设置鼠标松开时的颜色
var e=window.event;
var obj=e.srcElement;
obj.style.color='blue';
}
</script>
</head>
<body >
<p style="color: green;" onmousedown="mousedown()" onmouseup="mouseup()">
改变
</p>
</body>
</html>
鼠标的移入/移出事件
鼠标的移入和移出事件分别是onmouseover和onmouseout事件。其中，onmouseover 事件在鼠标移动到对象上方时触发事件处理程序，onmouseout事件在鼠标移出对象上方时触发事件处理程序。可以用这两个事件实现在指定的对象上移动鼠标时，其对象的动态效果。
鼠标移动事件
鼠标移动事件(onmousemove) 是鼠标在页面上进行移动时触发事件处理程序，可以在该事件中用document对象实时读取鼠标在页面中的位置。
例子：在状态栏中显示鼠标在页面中的当前位置
本实例是鼠标在页面中移动时，在页面的状态栏中显示当前鼠标在页面上的位置，也就是(x,y)值。
代码：
<body style="height: 3000px;position: relative;">
<script type="text/javascript">
document.addEventListener('mousemove',function(){
console.log('鼠标移动')
x = window.event.x
y = window.event.y
console.log('(%d,%d)',x,y)
},false)
</script>
</body>运行结果：
鼠标单击事件和鼠标双击事件
点击div方块，单击时控制台输出单击，双击方块控制台输出双击
代码：
<body style="height: 3000px;position: relative;">
<div id="box1">
</div>
<script type="text/javascript">
var input = document.getElementById('box1')
//增加聚焦监听事件
//因为双击时单击也会执行，所以给单击设置延时，如果双击则单击还没反应过来则清除time就不会输出单击
var time
input.addEventListener('click',function(){
//clearTimeout清除time
clearTimeout(time)
time = setTimeout(function(){
console.log('单击')
},300)
},false)
input.addEventListener('dblclick',function(){
clearTimeout(time)
console.log('双击')
},false)
</script>
</body>运行结果：
鼠标拖拽事件
设置一个div方块，鼠标选值方块按下后可以进行拖拽
<body style="height: 3000px;position: relative;">
<div id="box1">
</div>
<script type="text/javascript">
var move = document.getElementById('box1')
//点击时的x,y位置
basex = 0
basey = 0
//移动后的x,y位置
movex = 0
movey = 0
move.addEventListener('mousedown',function(e){
var ev = e || window.event
basex = ev.pageX
basey = ev.pageY
document.onmousemove = function(e){
var ee = e || window.event
movex = ee.pageX - basex
movey = ee.pageY - basey
//下次移动的basex,y就变成当前的位置
basex = ee.pageX
basey = ee.pageY
move.style.left = move.offsetLeft + movex + 'px'
move.style.top = move.offsetTop + movey + 'px'
}
},false)
//鼠标抬起时取消事件
move.addEventListener('mouseup',function(){
document.onmousemove = null
},false)
</script>
</body>box1方块的属性
#box1{
width: 100px;
height: 100px;
background-color: yellow;
position: absolute;
}运行结果：
最后
以上就是明亮高跟鞋为你收集整理的JavaScript学习（十八）--鼠标事件（鼠标点击松开移动效果）的全部内容，希望文章能够帮你解决JavaScript学习（十八）--鼠标事件（鼠标点击松开移动效果）所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
![[转] 判断html页是否滚动停止](/uploads/reation/bcimg11.png)
发表评论 取消回复