前端——鼠标监听事件

最新推荐文章于 2023-10-24 07:00:00 发布

五月天差一天

最新推荐文章于 2023-10-24 07:00:00 发布

阅读量1.8k

点赞数 1

分类专栏： js jquery 文章标签： jquery javascript

本文链接：https://blog.csdn.net/s707365172/article/details/115708840

版权

jquery 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

7 篇文章 0 订阅

订阅专栏

前端——部分鼠标监听事件

下午跟着视频做一个拖拽案例的时候，想实现一个简单想法，如下图所示。就是在拖拽的时候，右边的数字变成红色，不拖拽时又变回原来的颜色。

有想法就马上执行，我第一反应当然是用鼠标监听事件来做，但是在mouseover()和mouseout()、mouseenter()和mouseleave()或者hover()中应该选择哪个来做呢，尴尬的是好像都不行，因为拖拽有一个特点，只要第一次点住目标不放，后面鼠标不在目标上也能拖拽目标，这就导致拖拽过程中鼠标一旦偏出目标，数字就会变回原色。那如果只设置鼠标移入事件呢，好像更不行，虽然只设置移入事件，鼠标在拖拽中就算移出目标也不会变成原色，但是鼠标放开数字也变不回原色了，和我想的不一样。百度了一下，原来还有个mousedown()和mouseup()，好吧，小白还是小白，有了这个应该就好办了。于是就有了下面的代码。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<script type="text/javascript">
			
		$(function(){
			$('.box').draggable({
				//限制在X轴向拖动
				axis:'x',
				//限定在父级范围内拖动
				containment:'parent',
				//设置拖动时候的透明度
				opacity:0.6,
				drag:function(ev,ui){
					//console.log(ui); 
					//document.title = ui.position.left;
					$('#showNumber').val(parseInt(100*(ui.position.left/750)));
					$('.con_slide').css({'width':ui.position.left});
				}
			});
			$(window).mousedown(function(){
				$('#showNumber').css({'color':'red'});
			});
			$(window).mouseup(function(){
				$('#showNumber').css({'color':'#000'});
			});	
		});
	</script>
	<style type="text/css">
		.con{
			width:800px;
			height:50px;
			border:1px solid #000;
			margin:50px auto 0;
		}
		.con_slide{
			background:#666;
			width:0px;
			height:50px;
			border:0px;
			float:left;
			opacity:0.3;
			filter:alpha(opacity=30);
		}
		.box{
			width:50px;
			height:50px;
			background-color:lightblue;

		}
		.box:hover{
			cursor:pointer;
		}
		#showNumber{
			position:absolute;
			width:48px;
			height:48px;
			text-align:center;
			line-height:50px;
			top:50px;
			left:50%;
			margin-left:420px;
		}
	</style>
</head>
<body>
  <div class="con">
  	<div class="con_slide"></div>
		<div class="box"></div>
	</div>
	<input type="text" name="" id="showNumber">
</body>
</html>

大功告成了，用浏览器执行后就有了上面动态图的效果了，虽然很简单😂，最后放出部分鼠标监听事件，加深记忆。

//鼠标移入、移出，子元素也会跟着触发
$('.con').mouseover(function(){
	alert('移入');
});
$('.con').mouseout(function(){
	alert('移出');
});

//鼠标移入、移出，子元素不会触发
$('.con2').mouseenter(function(){
	alert('移入');
});
$('.con2').mouseleave(function(){
	alert('移出');
});

//mouseenter()和mouseleave()可以合并成以下写法
$('.con2').hover(function(){
	alert('移入');
},function(){
	alert('移出');
});

//当然还有监听鼠标点击事件
$('.con2').mousedown(function(){
	alert('点击');
});
$('.con2').mouseup(function(){
	alert('松开');
});

当然鼠标监听事件还有很多，像滚轮等，之后遇到难点再来感概感概。

五月天差一天

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
前端——鼠标监听事件

前端——部分鼠标监听事件下午跟着视频做一个拖拽案例的时候，想实现一个简单想法，如下面视频所示。就是在拖拽的时候，右边的数字变成红色，不拖拽时又变回原来的颜色。有想法就马上执行，我第一反应当然是用鼠标监听事件来做，但是在mouseover()和mouseout()、mouseenter()和mouseleave()或者hover()中应该选择哪个来做呢，尴尬的是好像都不行，因为拖拽有一个特点，只要第一次点住目标不放，后面鼠标不在目标上也能拖拽目标，这就导致拖拽过程中鼠标一旦偏出目标，数字就会变回原色。那
复制链接

扫一扫