这两天给团队做一个类似京东首页目录分类的组件:
这里实现的是当鼠标hover左侧的商品分类时,右侧显示出分类面板,当鼠标移出分类区域时,面板隐藏。
在实现鼠标移出面板隐藏的时候,一开始考虑为整个分类区域绑定mouseout事件,但发现只要鼠标在各个子元素li之间切换,就会触发此事件。
后来考虑使用mouseleave,成功实现功能。
总结一下:
- mouseout:不论鼠标指针离开被选元素还是任何子元素,都会触发
- mouseleave:只有在鼠标指针离开被选元素时,才会触发
这两天给团队做一个类似京东首页目录分类的组件:
这里实现的是当鼠标hover左侧的商品分类时,右侧显示出分类面板,当鼠标移出分类区域时,面板隐藏。
在实现鼠标移出面板隐藏的时候,一开始考虑为整个分类区域绑定mouseout事件,但发现只要鼠标在各个子元素li之间切换,就会触发此事件。
后来考虑使用mouseleave,成功实现功能。
总结一下: