Question

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

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

“事件授权背后的想法是，而不是附加一个在每个感兴趣的节点上监听一个事件，你附上一个单个侦听器到更高级别的节点，将检查它捕获的事件目标是否从实际中冒出来感兴趣的节点;如果是这样，将执行处理程序的逻辑。“

以下是我的代码实现。它运行得很漂亮......除了工具提示只显示 AFTER 第一个鼠标悬停事件。当我第一次鼠标悬停在节点上时，事件会完全触发，但工具提示不会呈现。它只会显示随后的鼠标悬停事件。在第一次鼠标悬停事件中，我可以观察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)来显示工具提示，但在这种情况下，您必须自己管理鼠标事件，这是您需要的，因为来自UX透视图，您不希望显示单个工具提示，您希望：

显示工具提示，指示正在加载信息。
然后：
- 如果用户仍悬停在节点上，则显示已加载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

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

查询节点

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

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() {}
    });
});

Dojo Tooltip仅在首次鼠标悬停事件后显示

2 个答案: