前几天做客服的时候遇到个客户来说我们的页面出错了, 两边鸡同鸭讲了半天发现都没法理解对方, 让客户截图后发现果然跟我这边不一样, 远程过去一看, 对面用的是 Win10 + Edge, 在我们本该出现 tipsy 的地方鼠标移上去没任何反应, 客户看不到该有的提示, 也难怪要跑过来找客服
一开始以为是 Edge 和 IE11 又出现什么奇葩的 jQuery 事件绑定错误, 需要在 knockout 的动态渲染完成后再做事件绑定, 但是仔细查了下后发现还不是这么回事, 熊去搜了下表示似乎 “disabled 的 input 元素是不响应鼠标事件的”, 但是为啥 Chrome 又能支持? 把 Firefox 也拉进来测试, 发现似乎不响应是通用标准, Chrome 那个浓眉大眼的货又一次不按常理出牌在鼠标事件完成后另外触发了一次, 所以我们测试一直没问题
既然知道了这么个原因, 而我们又要对一个 disabled 的 input 元素做悬浮事件, 怎么办? 按 Bootstrap 的说法, 在外面包一层, 然后把悬浮事件绑定到包的那一层上就好, 但是这么搞了后还是失败, 各种姿势换了一遍后发现如果我多包一点东西进去, 然后鼠标从多包的那一边进入, 就可以正常触发事件, 这是什么鬼? 想了半天没想明白, 暴力在外面做了一个图标来绑定悬浮事件先解决问题再说
吃了个饭回来, 越想越不对, 难道是因为那个 input 元素有 1px 的 border, 然后导致 Edge 那货一看这个区域都属于 disabled input, 所以其他这个区域的其他元素也不做任何响应? 怒而把包的那一层加了个 border: 5px solid transparent; margin: -5px, 果然就好了… 就仅仅是需要让包的这层真的比那个 disabled input 更大而已
不过还有几个坑没想明白的
- 不知道是不是跟 Edge 的刷新率有关, 如果鼠标进出太快, 也可能不会触发包的那一层的事件
- 不知道是不是需要额外设置 float 或 z-index 关系, 让包的那一层的 z-index 更高, 这样才能正确响应鼠标事件, 可能也不用去 hack border
最近其他事太多, 这个坑先这么填着, 回头有空了再来细细研究, 写前端真的是折寿啊
写这篇 blog 时去搜了下相关内容, 还有建议把元素不做 disabled, 在 hover 事件里动态设置为 disabled 的乱搞流… 你这样样式都不对的好么