<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>
分享到：
相关推荐
攻击者利用应用程序的动态展示数据功能，在html页面里嵌入恶意代码。当用户浏览该页之时，这些嵌入在html中的恶意代码会被执行，用户... 反射型 存储型 DOM型(eval,innerhtml,setTimeout,setInterval,document.write)
（新手可能认为setTimeout与setInterval是javascript函数，这是错误的。新手容易将javascript对象函数与DOM对象方法混淆。）先来一段代码，大家猜猜在各种浏览器下的结果会是怎么样的呢？ 代码如下: function f(){ ...
异步更新队列 可能你还没有注意到，Vue 异步执行 ...Vue 在内部尝试对异步队列使用原生的 Promise.then 和 MessageChannel，如果执行环境不支持，会采用 setTimeout(fn, 0) 代替。 例如，当你设置 vm.someData = 'ne
Shadow-DOM注入样式 轻松修改Shadow DOM CSS的辅助功能。 安装 npm install shadow-dom-inject-styles --save Vanilla JS示例/演示 ... setTimeout ( ( ) => { const toolbar = document . querySelector
VUE异步更新DOM 首先，Vue 在更新 DOM 时是异步执行的！...Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate，如果执行环境不支持，则会采用 setTimeout(fn, 0) 代替。 例如，当你
秘银查询 查询秘银虚拟dom以进行测试 安装 npm install mithril-query --save-dev 设置 为了在mithril 2.x中运行测试，我们需要进行一些设置。 那是模拟domril渲染和请求... setTimeout ( callback , 1000 / 60 ) 从3
主要介绍了vue 解决setTimeOut和setInterval函数无效报错的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
此实用程序对CSS动画，DOM更改，WebGL过渡或可以根据进度值进行更新的任何内容很有用。 它基本上是一个带有进度的setTimeout（或setInterval）。 功能：体积小，无依赖项基于requestAnimationFrame针对多个实例进行...
11、增加 delay() 方法【等同 setTimeout】； 12、删除 animate 函数请使用 animate.css 进行动画操作； 13、修正下拉刷新低版本手机bug； 14、增加 isHide() 判断元素是否隐藏（isShow()判断是否展示）； 15、修正...
这里主要用到两个HTMLDOMWindow对象中函数，settimeout(),clearTimeout() 我这里两个单击事件触发的时间间隔设置在等于300毫秒，这里需要根据实际情况而定。 源码如下： <!DOCTYPE html> <html>
先来了解 setInterval : 1,HTML DOM setInterval() 方法 定义和用法 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或...
JS 事件环 JS 程序的运行是离不开事件环机制的，这个机制保证在发生某些事情的时候我们有机会执行一个我们事先预定好的函数，事情发生的时候 ...setTimeout、DOM或者 HTTP请求这部分其实并不在 v8 引擎中，这些属于 w
setTimeout(()=>{ this.contentToggle(); },1000) }, methods:{ contentToggle(){ console.log(this.$refs.bodyFont.offsetHeight); } } vue想要获取dom元素的高，一般情况下我们都可以想到写在mounted函数...
日期对象Date() 计算机纪元年 : 1970.01.01 每一个创建出来的date对象都记录着那一刻的时间 doc getTime()可以计算时间间隔(ms) ...setInterval()、setTimeout()、clearInterval()、clearTimeout() 都是
前端开发常见问题涵盖了多个维度，从技术基础知识、编码实践、性能优化到跨平台兼容性等。...DOM操作性能：频繁操作DOM可能导致页面性能下降，需要合理使用事件委托、DocumentFragment、批量更新DO
人造世界 在这一点上，我什至不认为这是一个好主意…… ... setTimeout ( function ( ) { request . readyState = 'done' request . result = 'Great job!' if ( typeof request . onsuccess === 'f
setTimeout停下后触发棋格事件 事件完成后轮到下一个玩家 其他 处理买地和升级地产 判断玩家顺序（避开停止和破产状态） 判断玩家破产 判断游戏结束 数据(data.js) 角色棋子 名字 金钱 状态（活跃或破产） 停止...
延迟执行，其实就是用到了setTimeout这个函数。善于利用这个函数，可以减少很多ajax的请求，以及dom操作。
JavaScript 计时事件 通过使用 JavaScript，我们有能力做到...注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。 setInterval() 方法 setInterval() 间隔指定的毫秒数不停地执行指定的代码 语
#DOM #SVG＃事件 ＃获取#MealDB API ＃数组#LocalStorage #HTML音频API #fetch＃async / await #css加载程序 DOM＃间隔＃事件 ＃语音合成 #CSS效果#LocalStorage ＃获取＃分页＃Lyrics.ovh API #CSS动画#...