简短问题
我正在执行dojo.query()
,并使用NodeList.onmouseenter()
函数对所有返回的节点应用一个事件处理程序。但是,当其中一个节点触发事件时,我需要知道是哪个节点,以便从该特定节点的位置遍历DOM。我如何在触发时获得对该特定节点的引用?
包含完整上下文的长格式问题
我正在尝试将jQuery支持的导航菜单(see overview and complete source)应用到Dojo环境中。
<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>
,事件处理程序从$(this)
开始向上爬一层DOM,然后向下爬一层DOM。***这是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
来完成这一任务?
2条答案
按热度按时间wnvonmuf1#
在IIRC中,onmouseenter回调函数不接收节点作为参数,而是接收事件对象。如果是这种情况,您可以尝试:
1.通过其他方式获取节点,(evt.currTarget或类似的东西,我总是与这些混淆...)
1.改为使用forEach,获取对节点的引用,并手动执行事件连接:
wlsrxk512#
您可以获得的节点的最佳引用是节点本身,包括其ID。在触发时,“this”是节点,您可以使用它获得所有内容,尤其是其ID,其中:this.id.