`
jslfl
  • 浏览: 322421 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

dom事件与setTimeout

    博客分类:
  • web
dom 
阅读更多
<html>
	<head>
		<script type="text/javascript">
			function mouseout(){
				alert("mouseout!!");
			}
			
		</script>
	</head>
	<body>
		<div id="div1" onmouseout="mouseout()" style="width: 100px;height: 100px;background-color: red;">
			<div style="width: 50px;height: 50px;background-color: blue;">
				<a>aaaaaaaa</a>
			</div>
		</div>
	</body>
</html>


我的目的是鼠标移到div1外面时执行事件,里面的div和a元素应和div1是一个整体,但运行时,由于事件模型的干扰,当鼠标移进里面的div或a元素时,div1的onmouseout事件也会被触发,这样就不合本意,通过下面方法可解决,再加入onmouseover事件
	var timeOut;
	function mouseout(){
		timeOut = setTimeout(function (){
			alert("mouseout!!");
		},1);
	}
	function mouseover(){
		clearTimeout(timeOut);
	}




下面是网友提供的DOM事件模型测试,比较不错
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<style type="text/css" media="screen">
			div * {
				display: block;
				margin: 4px;
				padding: 4px;
				border: 1px solid white;
			}
			textarea {
				width: 20em;
				height: 2em;
			}
		</style>
		<script type="text/javascript">
			//<![CDATA[
			function init() {
				var log = document.getElementsByTagName('textarea')[0];
				var all = document.getElementsByTagName('div')[0].getElementsByTagName('*');
				for (var i = 0, n = all.length; i < n; ++i) {
					all[i].onmouseover = function(e) {
						this.style.border = '1px solid red';
						log.value = '鼠标现在进入的是: ' + this.nodeName;
					};
					all[i].onmouseout = function(e) {
						this.style.border = '1px solid white';
					};
				}
				var all2 = document.getElementsByTagName('div')[1].getElementsByTagName('*');
				for (var i = 0, n = all2.length; i < n; ++i) {
					all2[i].onmouseover = function(e) {
						this.style.border = '1px solid red';
						if (e)//停止事件冒泡
							e.stopPropagation();
						else
							window.event.cancelBubble = true;
						log.value = '鼠标现在进入的是: ' + this.nodeName;
					};
					all2[i].onmouseout = function(e) {
						this.style.border = '1px solid white';
					};
				}
			}


			window.onload = init;
			//]]>
		</script>
	</head>
	<body>
		<p>
			DOM树的结构是:
		</p>
		<pre><code>
	UL
	  - LI
	    - A
	      - SPAN
		</code></pre>
		<div>
			<ul>
				<li>
					<a href="#"><span>Bubbllllllllllllllle</span></a>
				</li>
				<li>
					<a href="#"><span>Bubbllllllllllllllle</span></a>
				</li>
			</ul>
		</div>
		<textarea></textarea>
		<p>
			鼠标进入UL的任何一个子元素,如果不停止冒泡,我们从UL到SPAN都定义了鼠标悬停(<code>
				mouseover</code>
			)事件,这个事件会上升了UL,从而从鼠标所进入的元素到UL元素都会有红色的边。
		</p>
		<div>
			<ul>
				<li>
					<a href="#"><span>Bubbllllllllllllllle</span></a>
				</li>
				<li>
					<a href="#"><span>Bubbllllllllllllllle</span></a>
				</li>
			</ul>
		</div>
		<p>
			如果停止冒泡,事件不会上升,我们就可以获取精确的鼠标进入元素。
		</p>
	</body>
</html>
分享到:
评论

相关推荐

    js_HTML_Dom操作练习

    10. **动画与定时器**:结合`setTimeout()`和`setInterval()`函数,我们可以实现简单的DOM元素动画效果。例如,改变元素的位置或透明度,以创建动态视觉效果。 这个练习项目会涵盖以上这些基本概念,通过实际操作,...

    JavaScrpt DOMscripting编程艺术

    8. **DOM事件冒泡与捕获**:事件流的两种模式,理解它们对于处理复杂事件交互至关重要。冒泡是从最深的节点开始向上逐级传播事件,而捕获则从文档根节点向下到目标节点。 9. **DOMContentLoaded和load事件**:...

    JavaScriptDOM编程艺术

    11. **动画与定时器**:利用`setTimeout`和`setInterval`实现定时执行的动画效果,结合DOM操作可以创建动态的网页交互。 12. **DOM性能优化**:了解DOM操作可能带来的性能影响,比如避免不必要的DOM遍历,使用文档...

    Javascript_Dom操作案例

    JavaScript DOM(Document Object Model)操作是前端开发中的基础技能,它允许我们通过代码与网页的结构进行交互。在这个“Javascript_Dom操作案例”中,我们将深入探讨如何利用JavaScript有效地操纵DOM元素,提升...

    记录我的旅程之JavaScript Dom系列里面的所有例题

    在这个“记录我的旅程之JavaScript DOM系列”中,我们深入探讨了一系列与DOM相关的例题,这些例题旨在帮助开发者更好地理解和掌握DOM操作技巧。 首先,我们要了解DOM的基本概念。DOM是一个树形结构,它将网页内容...

    JavaScriptDOM编程艺术.rar

    4. **事件处理与事件委托**:如何利用DOM事件来响应用户交互,以及事件委托技术,用于优化大规模事件处理。 5. **动画与定时器**:使用setTimeout和setInterval创建动画效果,以及如何避免常见的计时器问题。 6. *...

    模态对话框导致setTimeout失效的解决方案(一)

    然而,当模态对话框打开时,页面的主执行线程被阻塞,使得与用户交互相关的事件无法立即响应,这包括`setTimeout`的回调函数。 问题的根本在于模态对话框创建了一个新的事件循环,这个新的循环会在对话框关闭之前...

    angularjs,ng-repeat循环渲染时,无法获取dom对象.pdf

    这个服务是AngularJS中封装的JavaScript原生的`setTimeout`函数,它允许开发者在AngularJS的下一个事件循环结束之后执行函数,即等待当前的数据绑定和视图渲染操作完成后才去获取DOM对象。使用`$timeout`服务来延迟...

    《javascript-DOM编程艺术》原书代码

    《JavaScript DOM编程艺术》是Jeremy Keith撰写的一本经典著作,主要介绍了如何使用JavaScript与DOM(Document Object Model)进行交互,从而实现网页动态效果和富用户体验。DOM是HTML和XML文档的编程接口,允许我们...

    JS操作DOM元素属性和方法大全

    9. **事件冒泡与事件捕获** - 事件冒泡:事件从最深的节点开始,逐级向上层节点传播事件。 - 事件捕获:事件从最外层节点开始,逐级向下层节点传播事件。 - `event.stopPropagation()`阻止事件冒泡,`event....

    第 5 章 BOM 和DOM.pptx

    本章节主要讲解了浏览器对象模型(BOM)和文档对象模型(DOM),并对 JavaScript 中的事件、存储机制和 DOM 操作进行了详细的讲解。 BOM 概述: 浏览器对象模型(BOM)是指浏览器的对象模型,它是 JavaScript ...

    JAvascript Dom编程艺术 图片库

    11. **性能优化**:探讨DOM操作的性能影响,学习如何减少DOM操作次数、使用文档片段(documentFragment)和事件委托等技巧来提升页面性能。 通过阅读《JavaScript DOM编程艺术》,你不仅可以巩固JavaScript基础知识...

    javascript中的BOM与DOM、JS核心.pdf

    * 设置超时与暂停(setTimeout()、setInterval()) * 状态栏 除了window对象之外,还有其他一些BOM对象,如document对象、location对象、navigator对象、screen对象、history对象、frames对象等。这些对象的属性和...

    模态对话框导致setTimeout无效的解决方案(二)

    但请注意,Web Workers不适用于所有类型的JavaScript操作,如DOM操作或访问全局变量。 示例代码可能如下所示: ```javascript // 假设我们有一个函数需要在对话框关闭后执行 function delayedAction() { // ... }...

    Javascript定时器 三 setTimeout func 0

    - **DOM更新**:在修改DOM元素后,可以使用`setTimeout(func, 0)`确保在DOM更新完成后再执行依赖于新状态的代码。 - **UI渲染优化**:通过将耗时操作拆分成多个小任务,利用`setTimeout(func, 0)`间隔执行,避免阻塞...

    js和dom用法案例

    `setTimeout` 与 `setInterval` 类似,但它只执行一次,`clearTimeout` 用于清除定时。Body 和 `document` 对象有各种事件,如 `onload`(加载完成)、`onunload`(页面关闭)和 `onbeforeunload`(准备关闭)。例如...

    JavaScriptDOM编程艺术及源代码

    JavaScript DOM编程艺术是一本深入探讨JavaScript与DOM交互的权威指南,它涵盖了JavaScript在网页动态化、元素操作、事件处理以及Ajax通信等方面的核心技术。DOM(Document Object Model)是Web页面的一种结构化的...

Global site tag (gtag.js) - Google Analytics