JS 模拟 select

最新推荐文章于 2024-07-24 20:18:42 发布

打字员

最新推荐文章于 2024-07-24 20:18:42 发布

阅读量1.5k

点赞数

分类专栏： JS 文章标签： list function border xhtml callback html

本文链接：https://blog.csdn.net/danica7773/article/details/5486858

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

这次把以前写的一个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类的时候碰到的最大问题得以解决。

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