JS 模拟 select

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

 

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

 

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

 

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

 

Danica7773类库

 

 

下面来说说我的发现。

 

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

 

给元素添加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类的时候碰到的最大问题得以解决。

 

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值