这种情况是在使用 antd 中 tooltip 遇到的, 因为要自己控制 tooltip 的显示和隐藏, 出发元素有可能是被禁用的按钮.
最开始的代码:
- <tooltip>
- <button
- disabled={somecondition}
- onmouseenter={()=>{console.log('enter')}}
- onmouseleave={()=>{console.log('leave')}}
> 按钮 </button>
</tooltip>
逻辑就是通过监听按钮的移入和移出事件来模拟 hover, 控制 tooltip 的显隐, 当 button 是 disabled 状态是, 只触发 mouseenter 事件, 而不触发 mouseleave 事件
原因可能是被禁用的表单元素不会触发其他的事件.
解决办法
在按钮外面包一层 div, 将事件添加到这个 div 上. 这时因为还存在另外一个问题, 子元素是 disabled, 移出时也不会触发, 需要给 div 加一些 padding 来撑开距离. 但是实际的使用过程中发现如果快速移入移出有时会失效
模拟元素的禁用样式, 不禁用元素, 这样就不会影响事件了.
来源: http://www.jianshu.com/p/1d85d9f65632