JS 模拟 select

来源：互联网发布：迅雷看看mac版下载编辑：程序博客网时间：2024/05/28 23:20

这次把以前写的一个JS模拟select的类重写了一次。

不过类似的JS在网上一搜索还是有很多的，并没有什么新意的地方。

只是在重写的过程中发现一些有趣的事，所以把源程序贴出来，也顺便说说我的发现。

下面是JS模拟select的类。用了我自己写的类库, 在Danica_Effect.js里面。

Danica7773类库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><mce:script type="text/javascript" src="Danica_Base.js" mce_src="Danica_Base.js"></mce:script><mce:script type="text/javascript" src="Danica_Comm.js" mce_src="Danica_Comm.js"></mce:script><mce:script type="text/javascript" src="Danica_Ajax.js" mce_src="Danica_Ajax.js"></mce:script><mce:script type="text/javascript" src="Danica_Effect.js" mce_src="Danica_Effect.js"></mce:script><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">*{padding:0;margin:0;}ul{list-style:none;}body{text-align:center;}div{margin:20px auto 0px;}span.bbb_text{border:1px #242424 solid;font-size:12px;}span.bbb_select{background:#f00;}.bbb_list{font-size:12px;border-left:1px #242424 solid;border-right:1px #242424 solid;border-bottom:1px #242424 solid;}.bbb_list li{width:100%;height:22px;display:block;line-height:22px;background:#fff;}.bbb_list li.bbb_select{background:#ff0;}</style></head><body><div><select id='aa'><option value="aaa">aaa</option><option value="eee">eee</option><option value="ee23423423e" selected = "selected">ee23423423423424e</option></select></div><div><select id='aaa'><option value="aaa">aaa</option><option value="eee">eee</option><option value="ee23423423e" selected = "selected">ee23423423423424e</option></select></div><mce:script type="text/javascript"></mce:script></body></html>

下面来说说我的发现。

我想有很多人都会碰到过这样的问题：

给元素添加mouseover/mouseout事件的时候，常常会在鼠标经过元素内部的子元素的时候就触发了mouseout事件。

今天我就碰到的这样的情况，刚开始百思不得其解，不知道为什么会这样。

后来想到，会不会是鼠标经过子元素的时候，被认为是离开了绑定了mouseout事件的父元素，所以才会发过这样的情况。

所以我写了下面测试代码：

结果显示，在鼠标进入父元素的时候只alert了1，由父元素进入子元素的时候，alert了2，但随后也alert了1，也就是说在父元素和子元素的交界的地方发生了mouseout事件。那随后的mouseover事件又怎么解释呢，是进入子元素的时候又再次被认为是进入了父元素，还是给父元素绑定事件的时候同时也给子元素绑定了呢（我想这种情况是不可能的，我在程序中也没有写过这样的过程），为了证实假设是否成立，我给函数bg在最后面添加了一句“alert(_obj.onmouseover);”之所以这样加，一个是想看看子元素是否也绑定了mouse事件，同时，我也想看看传进去的event是否在交界的地方发生了变化。

结果显示，1，在交界的地方event的target确实改变了，由父元素变成了子元素；2子元素的mouseover事件为null，也就是说子元素没有绑定事件。

于是我想，如果我将传event改过传父元素对象会怎么样呢（这样操作的元素对象就不会变了）？

运行上面的代码，alert的结果和上面的一样（最后一句注销掉）。但由于操作对象没有发生变化，一直是绑定了事件的父元素。

所以在去掉alert语句后，程序运行的效果达到了我的要求（进入父元素后背景为红色，离开后为无色）。虽然中间还是发生了mouseout和mouseover事件，但由于时间很短，所以根本看不出来。

至此，这个在写JS模拟select类的时候碰到的最大问题得以解决。

但还是要说一句的是，那个在父子元素边界处被认定为是离开了父元素的判定让人很无语。