当'mouseenter'触发后行无效时，SlickGrid'mouseleave'事件未触发答案

【问题标题】：SlickGrid 'mouseleave' event not fired when row invalidated after 'mouseenter' fired当'mouseenter'触发后行无效时，SlickGrid'mouseleave'事件未触发
【发布时间】：2014-06-05 03:00:04
【问题描述】：

我有一个 slickgrid，在 'onMouseEnter' 事件中，我执行以下操作：

更改相关行的底层 CSS
调用 grid.invalidateRow()
调用 grid.render()

后两个调用对于反映新的 css 类是必需的。但是，然后我需要捕获 onMouseLeave 事件，当我将鼠标从单元格（或行）移开时它不会被触发，大概是因为对 invalidate/render 的调用在我的鼠标下放置了一个新的 DOM 元素，它是不再是我最初“进入”的那个。

所以我有两个问题：

是否有另一种方法可以在不调用 invalidateRow/render 的情况下呈现给定单元格的新 css 类？
如果没有，是否有其他方法可以做到这一点并且仍然触发 onMouseLeave 事件？

【问题讨论】：

标签： slickgrid

【解决方案1】：

一种选择是使用setCellCssStyles 函数。

grid.onMouseEnter.subscribe(function(e, args){
    var cell = grid.getCellFromEvent(e),
        param = {},
        columnCss = {};

      for(index in columns){
          var id = columns[index].id;
          columnCss[id] = 'my_highlighter_style'
      }
      param[cell.row] = columnCss
      args.grid.setCellCssStyles("row_highlighter", param);
  })

所以上面的内容改变了row 的每个单元格的background-color 已被鼠标移入。在my fiddle 中，mouseLeave 订阅执行简单的console.log 以确保它仍在触发。

编辑：修复了小提琴中的外部资源使用情况以支持跨浏览器

【讨论】：

你的小提琴没用（不认识 Slick）。此外，根据我的经验，简单地调用 setCellCssStyles 实际上不会导致新样式被渲染。您还必须调用 invalidateRow() 然后 render() 才能看到新的类。
你用过火狐吗？由于外部 github 资源 mime 类型问题，它只能在 Firefox 中工作。 Chrome/IE 应该有一个使用它们的解决方案，但我上次将它设置为“工作”时，它仍然不适用于那些浏览器。
问题是我没有意识到 Slickgrid 使用了我传入的哈希（参考）来清除旧样式。因此，当我对代码中的散列进行更改，然后调用 setCellCssStyles 时，它使用了（相同的）散列，该散列已被修改为“清除”旧样式。解决方法是在调用 setCellCssStyles 之前对我的哈希进行深度克隆。