Как получить ссылку на запущенный узел внутри события, зарегистрированного NodeList.connect ()? - PullRequest
Новая
       25

Как получить ссылку на запущенный узел внутри события, зарегистрированного NodeList.connect ()?

2 голосов
/ 13 августа 2011

Краткий вопрос

Я выполняю dojo.query() и применяю обработчик событий ко всем возвращаемым узлам, используя функцию NodeList.onmouseenter(). Однако, когда один из этих узлов запускает событие, мне нужно знать, каким оно было, чтобы я мог пройти DOM из местоположения этого конкретного узла. Как я могу получить ссылку на этот конкретный узел во время запуска?

Длинный вопрос в полном контексте

Я пытаюсь адаптировать навигационное меню на основе jQuery ( см. Обзор и полный исходный код ) для работы в среде 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", но я планирую изменить его на hover (то есть "onmouseenter" и "onmouseleave"). В любом случае, триггер события вызывает скрытое подменю с эффектом jQuery «slideDown» (эквивалентно «wipeIn» Додзё). 

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

Чтобы перейти от <span> к вложенному <ul>, обработчик событий сканирует DOM на один уровень вверх, а затем на один уровень вниз ... начиная с $(this). Это часть, которая убивает меня в Додзё! Я пробовал десятки вариантов, но вот мой текущий (неработающий) код: 

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

}

Внутри функций подключения к событиям NodeList Додзё (например, onmouseenter) я не могу понять, как получить ссылку времени запуска на узел, который был запущен. Анонимная функция, которую я передаю «onmouseenter», принимает параметр под названием «node», но это только мое желаемое за действительное. Додзё на самом деле не проходит такую ​​ссылку.

Мне нужен эквивалент $(this) во второй строке приведенного выше фрагмента jQuery. Ссылка на конкретный узел, который был вызван событием, так что я могу пройти DOM из местоположения этого конкретного узла. Есть ли простой способ сделать это с помощью NodeList Додзё, который мне просто не хватает?

Ответы [ 2 ]

0 голосов
/ 22 ноября 2013

Лучшая ссылка, которую вы можете получить на узел, - это сам узел, включая его идентификатор.Во время запуска «this» является узлом, и с его помощью вы можете получить все, в частности его идентификатор, с помощью:

0 голосов
/ 13 августа 2011

IIRC, обратный вызов onmouseenter не получает узел в качестве параметра, а получает объект события.В этом случае вы можете попробовать:

  1. Получить узел другими способами (evt.currTarget или что-то в этом роде, я всегда путаюсь с этими ...)

  2. Вместо этого используйте 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();
     });
 });
...