鼠标悬停时懒惰加载绑定

Lazy Loading Binding On Mouse Hover

本文关键字：加载 绑定 悬停 鼠标      更新时间：2023-09-26

我在类似HTML Excel的大型网格中的每个单元格上使用以下绑定。现在我正在绑定到每个单元格，有没有一种方法可以做到这一点，即在鼠标悬停一定延迟后懒惰加载它，这样每个单元格都不需要激活它？如果鼠标在单元格上停留2秒钟，则工具提示绑定将激活并显示。此工具提示是引导程序工具提示。

 ko.bindingHandlers.tooltip = {
        init: function (element, valueAccessor) {
            $(element).tooltip();
            ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                $(element).tooltip("destroy");
            });
        }
    };

您可以在单元格容器上添加单个事件处理程序，而不是为每个单元格添加一个事件处理程序。给定标记

<div class="cell-container" data-bind="tooltipContainer: true">
  <div class="cell"></div>
  <div class="cell"></div>
  <div class="cell"></div>
</diV>

你可以使用这个绑定：

ko.bindingHandlers.tooltipContainer = {
    init: function (element, valueAccessor) {
        $(element).on('hover', '.cell', function() {
          $(this).tooltip();
        });
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).tooltip("destroy");
        });
    }
};

如果你想在顶部添加一个超时，这个

ko.bindingHandlers.tooltipContainer = {
    init: function (element, valueAccessor) {
        $(element).on('hover', '.cell', function() {
          var $this    = $(this),
              callback = function() { $this.tooltip(); };
          setTimeout(callback, 2000);
        });
        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            $(element).tooltip("destroy");
        });
    }
};

应该起作用。

相关文章：