事件mouseenter和事件mouseleave

最新推荐文章于 2023-11-13 18:03:24 发布

寒冥冷煜

最新推荐文章于 2023-11-13 18:03:24 发布

阅读量214

点赞数

分类专栏： javascript学习文章标签： JavaScript IE EXT HTML 框架 ViewUI

本文链接：https://blog.csdn.net/linder0209/article/details/83871276

版权

javascript学习专栏收录该内容

25 篇文章 0 订阅

订阅专栏

为了鼠标操作起来方便，IE实现了mouseenter 和mouseleave 事件，不过ExtJs实现了其他浏览器对这两个事件的支持。如果框架中没有用到ExtJs，可以参考ext-base-event.js中的自己实现。

mouseenter不同于mouseover（鼠标经过），它是在第一次鼠标进入节点区域时触发，以后在节点区域内(子节点间)移动时不触发，而onmouseover由于事件冒泡机制，每次移到不同的节点上都会触发，经常不能实现预期的效果。同理 mouseleave与 mouseout（鼠标移出）也类似

关于这两个事件的详细介绍，可参考Goodbye mouseover, hello mouseenter 该文章详细的介绍了这两个事件的实现与使用好处

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>事件mouseenter和事件mouseleave</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	</head>
	<body>
		<table width="500" border="1"  onmouseleave = "javascript:alert('鼠标离开table');" >
			<tr>
				<td onmouseenter = "javascript:alert('鼠标进入td');">
					鼠标进入
				</td>
				<td onmouseleave = "javascript:alert('鼠标离开td');">
					鼠标离开
				</td>
				<td>
					&nbsp;
				</td>
				<td>
					&nbsp;
				</td>
				<td>
					&nbsp;
				</td>
			</tr>
		</table>
		<br>
		
		<table width="500" border="1"  οnmοuseοut="alert('鼠标移出')" οnmοuseοver="alert('鼠标经过')" >
			<tr>
				<td>
					&nbsp;
				</td>
				<td>
					&nbsp;
				</td>
				<td>
					&nbsp;
				</td>
				<td>
					&nbsp;
				</td>
				<td>
					&nbsp;
				</td>
			</tr>
		</table>
	</body>
</html>