0

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

Dojo 站点以这种方式解释事件委托：

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

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

关于如何让工具提示显示在第一个鼠标悬停事件上的任何建议？提前致谢！

<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>
4

2 回答 2

2

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

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

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

  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();
        }
    });    
});​
于 2012-06-08T14:25:34.980 回答
1

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

  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() {}
    });
});
于 2012-06-08T15:48:26.327 回答