JavaScript学习(十八)–鼠标事件(鼠标点击松开移动效果)

我心飞翔 分类:javascript

目录

鼠标的单击事件

鼠标的松开或按下事件

鼠标的移入/移出事件

 鼠标移动事件

鼠标单击事件和鼠标双击事件

鼠标拖拽事件


鼠标和键盘事件是在页面操作中使用最频繁的操作,可以利用鼠标事件在页面中实现鼠标移动、单击时的特殊效果,也可以利用键盘来制作页面的快捷键等。

鼠标的单击事件

单击事件(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>
 

演示效果:

JavaScript学习(十八)--鼠标事件(鼠标点击松开移动效果)JavaScript学习(十八)--鼠标事件(鼠标点击松开移动效果)JavaScript学习(十八)--鼠标事件(鼠标点击松开移动效果)JavaScript学习(十八)--鼠标事件(鼠标点击松开移动效果)JavaScript学习(十八)--鼠标事件(鼠标点击松开移动效果)JavaScript学习(十八)--鼠标事件(鼠标点击松开移动效果)

 

鼠标的松开或按下事件

鼠标的按下或松开事件分别是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>
 

JavaScript学习(十八)--鼠标事件(鼠标点击松开移动效果)JavaScript学习(十八)--鼠标事件(鼠标点击松开移动效果)JavaScript学习(十八)--鼠标事件(鼠标点击松开移动效果)

 

鼠标的移入/移出事件

 鼠标的移入和移出事件分别是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>
 

运行结果:

JavaScript学习(十八)--鼠标事件(鼠标点击松开移动效果)

 

鼠标单击事件和鼠标双击事件

点击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>
 

运行结果:

JavaScript学习(十八)--鼠标事件(鼠标点击松开移动效果)

 

鼠标拖拽事件

设置一个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学习(十八)--鼠标事件(鼠标点击松开移动效果)

 

 

 

 

回复

我来回复
  • 暂无回复内容