Question

简短形式的问题

我正在执行dojo.query()并使用NodeList.onmouseenter()函数将事件处理程序应用于所有返回的节点。但是，当其中一个节点触发事件时，我需要知道它是哪一个，所以我可以从该特定节点的位置遍历DOM。如何在触发时获得特定节点的引用？

具有完整上下文的长格式问题

我正在尝试调整基于jQuery的导航菜单（see overview and complete source）以在Dojo环境中工作。简而言之，HTML看起来像这样：

<ul class="topnav">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Tutorials</a>
        <ul class="subnav">   <!-- This CSS class hides the <ul> on page load -->
            <li><a href="#">Sub Nav Link</a></li>
            <li><a href="#">Sub Nav Link</a></li>
        </ul>
        <span></span>         <!-- CSS fills the <span> with an image -->
    </li>
    ...

最外面的<ul>标记表示整个导航菜单...嵌套的<ul>标记是菜单项具有下拉子菜单的位置。此类菜单项中还有一个<span>标记，用于显示箭头图像，并在DOM遍历期间更容易识别。

因此，jQuery代码为所有<span>标记添加了一个事件处理程序。上面的教程链接使用“onClick”，但我打算将其更改为悬停（即“onmouseenter”和“onmouseleave”）。无论哪种方式，事件触发器都会使隐藏的子菜单显示jQuery“slideDown”效果（相当于Dojo的“wipeIn”）。

$("ul.topnav li span").click(function() { 
    $(this).parent().find("ul.subnav").slideDown('fast').show();
});

要从<span>转到嵌套<ul>，事件处理程序会将DOM向上爬一级，然后从$(this)开始向后爬一级。 这是在Dojo中杀了我的部分！ 我尝试过几十种变体，但这是我当前（破碎）的代码：

dojo.require("dojo.fx");
dojo.require("dojo.NodeList-traverse");
dojo.require("dojo.NodeList-manipulate");
dojo.ready(function(){

    dojo.query("ul.topnav li span").onmouseenter(function(node) {
        node.siblings("ul.subnav").wipeIn().play();
    });

}

在Dojo的NodeList事件连接函数（例如onmouseenter）内部，我无法弄清楚如何获得触发的节点的触发时引用。我传递给“onmouseenter”的匿名函数采用了一个名为“node”的参数，但这只是我的一厢情愿。 Dojo并没有真正传递这样的参考。

我需要的是相当于上面jQuery代码段第二行的$(this)。对事件触发的特定节点的引用，以便我可以从该特定节点的位置遍历DOM。有没有一种简单的方法可以用Dojo的NodeList做到这一点，我只是缺少它？

Answer 1

IIRC，onmouseenter回调不接收节点作为参数，而是接收事件对象。如果是这种情况，您可以尝试：

通过其他方式获取节点，（evt.currTarget或类似的东西，我总是对这些......感到困惑）。

改为使用forEach，获取对节点的引用，并手动执行事件连接：

 dojo.query('blabla').forEach(function(node){
     dojo.connect(node, 'onmouseenter', function(evt){
         //node should point to wat you want now
         node.siblings("ul.subnav").wipeIn().play();
     });
 });

Answer 2

您可以访问节点的最佳参考是节点本身，包括其ID。在触发时，“this”是节点，通过它，您可以使用以下命令获取所有内容：this.id。

dojo.query(".anyClass").connect(Mouse.enter, function(evt){
   var xId=this.id;
   console.log("You entered element "+xId);
});

在NodeList.connect（）注册的事件内部，如何获取对触发节点的引用？

简短形式的问题

具有完整上下文的长格式问题

2 个答案: