Dojo Tooltip 仅在第一次 mouseover 事件后显示

Question

我正在使用 dojo 的事件委托将 Tooltip 小部件连接到动态生成的 dom 节点。

Dojo 网站这样解释事件委托：

“事件委托背后的想法是，而不是附加一个 监听每个感兴趣节点上的事件，您附加一个 单个侦听器到更高级别的节点，它将检查 它捕获的事件的目标，以查看它们是否从实际中冒泡 感兴趣的节点；如果是这样，将执行处理程序的逻辑。”

以下是我的代码实现。它工作得很好......除了，工具提示只显示AFTER第一个鼠标悬停事件。当我第一次将鼠标悬停在节点上时，事件会完美触发，但工具提示不会呈现。它只会显示随之而来的鼠标悬停事件。在第一个 mouseover 事件中，我可以观察 Firebug 控制台并看到 xhr.get 进入数据库并获取正确的数据。如果我注释掉工具提示并输入一个简单的 alert()，它会第一次起作用。

关于如何在第一个鼠标悬停事件中显示工具提示有什么建议吗？提前致谢！

<div class="col_section" id="my_groups">
    <div class="col_section_label">My Groups</div>
    <ul>
    <?php
        foreach($myGroups as $grp) {
            echo '<li><a class="myGroupLink" id="grp'.$grp['grp_id'].'">'.$grp['name'].'</a></li>';
        }
    ?>
    </ul>
</div>

<script>
    require(["dojo/on",
         "dojo/dom",
         "dijit/Tooltip",
         "dojo/_base/xhr",
         "ready!"], function(on, dom, Tooltip, xhr) {

    // Get Group ToolTip
    var myObject = {
        id: "myObject",
        onMouseover: function(evt){
            var grp_id = this.id;
            var content = '';
            xhr.get({
                url: "getGrpInfo.php",
                handleAs: "json",
                content: {
                    grp_id: grp_id,
                    content: "tooltip"
                },
                load: function(info) {
                    if(info == 0) {
                        content  = '<div class="grpToolTip">';
                        content += '    Information about this group is confidential';
                        content += '</div>';
                    } else {
                        content  = '<div class="grpToolTip">';
                        content += '    <img src="../ajax/getimg.php?id='+info.logo_id+'" />';
                        content += '    <div style="text-align:center">'+info.name+'</div>';
                        content += '</div>';
                    }

                    new Tooltip({
                        connectId: [grp_id],
                        label: content
                    });
                },
                error: function() {}
            });
        }
    };
    var div = dom.byId("my_groups");
    on(div,".myGroupLink:mouseover",myObject.onMouseover);
});
</script>

Answer 1

您的Tooltip 不会显示在第一个onmouseover 上，因为在触发onmouseover 事件时它不存在。

dijit/Tooltip 实例自己管理他们的鼠标事件，因此您不必管理onmouseover/onmouseout，您可能这样做是因为您不想预加载数据，或者您想在每次工具提示时加载数据即将上映。

除了dijit/Tooltip 实例之外，您还可以使用Tooltip.show(innerHTML, aroundNode, position) 和Tooltip.hide(aroundNode) 来显示工具提示，但在这种情况下，您必须自己管理鼠标事件，这正是您所需要的，因为从用户体验的角度来看，您不需要想要显示单个工具提示，您想要：

1. 显示一个工具提示，指示正在加载信息。

2. 然后：

   • 如果用户仍将鼠标悬停在节点上，则显示 XHR 加载信息
   • 取消 XHR 并隐藏 mouseout 上的工具提示

这是工作示例：http://jsfiddle.net/phusick/3hmds/

require([
    "dojo/dom",
    "dojo/on",
    "dojo/_base/xhr",
    "dijit/Tooltip",
    "dojo/domReady!"
], function(
    dom,
    on,
    xhr,
    Tooltip
) {

    on(dom.byId("groups"), ".group-link:mouseover", function(e) {
        var target = e.target;
        Tooltip.show("Loading...", target);

        var def = xhr.post({
            url: "/echo/html/",
            content: { html: target.textContent},
            failOk: true,

            load: function(data) {
                Tooltip._masterTT.xhr = null;
                Tooltip._masterTT.containerNode.innerHTML = data;
                Tooltip._masterTT.domNode.width = "auto";
             },
            error: function(e) {
                if (e.dojoType != "cancel") {
                    console.error(e);
                }
            }
        });

        Tooltip._masterTT.xhr = def;            
    });

    on(dom.byId("groups"), ".group-link:mouseout", function(e) {
        var target = e.target;        
        Tooltip.hide(target);
        if (Tooltip._masterTT.xhr) {
            Tooltip._masterTT.xhr.cancel();
        }
    });    
});​

Answer 2

像往常一样，我过度思考这个问题，专注于事件注册，而不是在页面加载时简单地创建工具提示。所以，这真的很简单：

1. 节点查询

2. 遍历它们并创建指向每个节点的工具提示。

   var myGroupsList = query("a.myGroupLink");    // query nodes based on class
   array.forEach(myGroupsList,function(entry,i){ // iterate through
   
       var grp_id = entry.id;
       var content = '';
       xhr.get({                                 // get data via xhr.get
           url: "getGrpInfo.php",
           handleAs: "json",
           content: {
               grp_id: grp_id,
               content: "tooltip"
           },
           load: function(info) {
               if(info == 0) {
                   content  = '<div class="grpToolTip">';
                   content += '    Information about this group is confidential';
                   content += '</div>';
               } else {
                   content  = '<div class="grpToolTip">';
                   content += '    <img src="../ajax/getimg.php?id='+info.logo_id+'" />';
                   content += '    <div style="text-align:center">'+info.name+'</div>';
                   content += '</div>';
               }
   
               new Tooltip({                     // create tooltip
                   connectId: [entry.id],
                   label: content
               });
           },
           error: function() {}
       });
   });