有关javascript 的onmouseout事件
相信很多人都碰到过，以前我也碰到过，那是为了做一个弹出菜单，最后还是用css搞定的。就那天又碰到同样的问题，找了半天资料，终于知道了究竟。
文档中onmouseout事件的定义是
- onmouseout 事件会在鼠标指针移出指定的对象时发生。
支持改时间的html标签也很多有
<a>, <address>, <area>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <cite>, <code>, <dd>, <dfn>, <div>, <dl>, <dt>, <em>, <fieldset>,
<form>, <h1> to <h6>, <hr>, <i>, <img>, <input>, <kbd>, <label>, <legend>, <li>, <map>, <ol>, <p>, <pre>, <samp>, <select>, <small>, <span>, <strong>,
<sub>, <sup>, <table>, <tbody>, <td>, <textarea>, <tfoot>, <th>, <thead>, <tr>, <tt>, <ul>, <var>
可是什么叫onmouseout到底在什么情况下被出发呢？举个简单的例子：
<div onmouseout=”javascript:this.style.display=’none’” style=”width:500px;height:300px;background-color:#ccc;”><a href=”#”>test</a></div>
可以做个小实验，可以发现，鼠标移出div时却是触发了onmouseout事件，div被隐藏了，可是在div内部，当鼠标移动到test的链接上时，div却也被隐藏了，相信原因很明了，即使在div内部，当鼠标进入其内部的对象时，也会触发div的onmouseout事件，再做个试验，把test的链接去掉，也就是div内部只剩下纯文本，这是鼠标移到文字上，没有反应。。。
解决办法：很简单，给div再加个事件onmouseover，因为鼠标在进入子对象同时也会触发div的onmouseover事件，上面的例子改为这样就可以解决问题：
<div onmouseout=”javascript:this.style.display=’none’” onmouseover=”javascript:this.style.display=’block’” style=”width:500px;height:300px;background-color:#ccc;”><a href=”#”>test</a></div>
近期评论