Question

我是javascript的新手，我想创建一个事件onclick来列出项目。问题是我想为li标签创建一个事件，但是当我点击后代ul时它会一直触发。

这是我的部分代码：

<li id="1660761" class="HTMLFirstLevel HTMLHorizontalArrowDown">
   <ul id="ul1223945" class="HTMLItem">
       <li id="1490659" class="HTMLRemainingLevels"></li>
       <li id="483463" class="HTMLRemainingLevels"></li>
       <li id="80919" class="HTMLRemainingLevels"></li>
       <li id="1280053" class="HTMLRemainingLevels"></li>
       <li id="1799353" class="HTMLRemainingLevels"></li>
       <li id="1882209" class="HTMLRemainingLevels"></li>
       <li id="462917" class="HTMLRemainingLevels"></li>
   </ul>
</li>
<li id= ......>
   <ul....>
   <ul...>
</li>

和我的javascript：

var parentNode = document.getElementById('1660761');

parentNode.addEventListener("click",function(e) {

    alert('Hi There');

});

}

现在我只希望它在id为1660761的项目li上启动，而不是列表中的项目。该列表是一个导入的组件，我不能在html中创建事件，这就是为什么我在外面用javascript访问它。

现在我通过标记名称扫描div然后添加“click”事件监听器（如果内容等于我正在搜索的标记内部html）来完成它。我把剩下的html留给了这个方法很重要：

<div id="MainMenu" class="HTMLMenuContainer HTMLMenuHorizontal">
    <ul id="ul1351387" class="HTMLMenu">
        <li id="1660761" class="HTMLFirstLevel HTMLHorizontalArrowDown">
            <a href="#">
                <span>Back Office</span>
            </a>
            <ul id="ul1172716" class="HTMLItem">
                <li id="1490659" class="HTMLRemainingLevels">
                    <a href="#">
                        <span>

                            Some submenu Here

                        </span>
                    </a>
                </li>
                .....

和代码：

var divs = document.getElementsByClassName('HTMLMenuHorizontal');
var span = divs[0].getElementsByTagName('span');

//I iterate till 19 cause its more than all the spans in the page.
for(var i=0; i<20; i++) {

var sp= span[i];

if(sp.innerHTML==('Back Office')){
   sp.addEventListener("click",function back(){
          //do something here like
          alert('Back Office');  
   });  

}
}

这样可以正常工作，并且它不会在内部发射。这是有效的，因为在我的情况下，itens不会改变内容，只改变可见性。对于所有其他有后代的人来说，我都是这样做的。

谢谢大家。

Answer 1

以下是此问题的jQuery代码：

$(function(){
    $("li.1660761").live("click", onListItemLink);
}

function onListItemLink(){
    alert('Hello World!');
}

这个适用于JavaScript：

var parentNode = document.getElementById('1660761');
parentNode.onclick = onListItemLink;

function onListItemLink(){
    alert('Hello World!');
}

Answer 2

请仔细查看此页面：

capture event

和什么功能（e - ＆gt; ??）

我希望它有所帮助。

Answer 3

$('#1660761').unbind('click').click(function(e) {
    if (e.target !== this) return;

    alert('Hey There!');
});

尝试此代码：http://jsfiddle.net/sd5LZ/

列表项li父节点上的Javascript事件处理程序

3 个答案: