0

Есть допустим меню:

<ul id="menu">
  <li><a href="">Item 1</a>
    <ul><li>Item 1.1</li>
        <li>Item 1.2</li>
    <ul>
  </li>
  <li><a href="">Item 2</a>
    <ul><li>Item 2.1</li>
        <li>Item 2.2</li>
    <ul>
  </li>
</ul>

Как верно сделать обращение к нужному LI чтобы при этом было задействовано его подменю? При условии что обращение должно работать в слкдующей функции:

$("menu").onmouseover = function() {
    //тут обработка нужного LI
}

P.S. Чтобы не путали, реализация идет не на Jquery. P.P.S. Юзать Jquery не предлагайте, есть требования. Иначе я бы и не парился!

И попутно вопрос, как этот кусок кода:

.onmouseover = function() { }

сделать таким

.mouseover(function() { }

Знаю что mouseover будет обрабатывать window.event но сложить обработчик не могу.

За ранее благодарен всем JS ГУРУ :)

4
  • В чем заключается задача? зачем вещать mouseover на меню, а почему не на #menu li...? Commented 28 сент. 2011 в 11:33
  • Хоть даже #menu li, не могу выбрать этот элемент. Вернее выбрать могу но только Item 1, Item 2 не откликается.
    – Palmervan
    Commented 28 сент. 2011 в 11:35
  • У вас ul не закрыты.
    – ling
    Commented 28 сент. 2011 в 11:52
  • ling да то мелочи, код набирал спеша!
    – Palmervan
    Commented 28 сент. 2011 в 11:55

4 ответа 4

2
<ul id="menu">
  <li><a href="">Item 1</a>
    <ul><li>Item 1.1</li>
        <li>Item 1.2</li>
    </ul>
  </li>
  <li><a href="">Item 2</a>
    <ul><li>Item 2.1</li>
        <li>Item 2.2</li>
    </ul>
  </li>
</ul>

<script>
function ae(e,t,f){if(e.addEventListener){e.addEventListener(t,f,false);}else if(e.attachEvent){e.attachEvent('on'+t,function(){f.apply(e)});}else{e['on'+t]=f;}return e;}

function hideUls(){
    var u = document.getElementById('menu').getElementsByTagName('ul'), i = 0;
    while(u[i]){
        u[i].style.display = 'none';
        ++i;
    }
}
function showUl(event){
    hideUls();
    var e = event || window.event;
    var t = e.target || e.srcElement;
    if(t.nodeName.toLowerCase() == 'a'){
        next(t).style.display = '';
    }
}
function next(x){
    do{
        x = x.nextSibling;
    }while(x && x.nodeType == 3);
    return x;
}
var a = document.getElementById('menu').getElementsByTagName('a'), i = 0;
while(a[i]){
    ae(a[i], 'mouseover', showUl);
    ++i;
}
hideUls();
</script>

Функция ae взята с javascript.ru (в оригинале - addEvent), допилена и минимизирована.

2
$("menu li").onmouseover = function(e) {
    var li_element = e.target;
}

вообще event.target не будет работать в ИЕ, там есть атрибут srcElement.

2

Не понял точно чего вы хотите, но если просто заполучить элемент, на который наехали - то он в event.target живёт, надо только ненужное фильтровать...

<html>
<body>
<ul id="menu" onmouseover="myFunc(event);">
  <li><a href="">Item 1</a>
    <ul><li>Item 1.1</li>
        <li>Item 1.2</li>
    <ul>
  </li>
  <li><a href="">Item 2</a>
    <ul><li>Item 2.1</li>
        <li>Item 2.2</li>
    <ul>
  </li>
</ul>

<script language="javascript">

function myFunc(e) {
    if (e.target.tagName != "LI")
        return;
    alert(e.target.innerHTML);
} // myFunc
</script>

</body>
</html>

Нужно только список будет ещё в div заключить чтобы по всей ширине страницы не реагировало.

0
$(document).delegate('#menu', 'click', function (event) {
    var cLi = event.target

})
В cLi тот li на который кликнули. кроссбраузерно

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.