Html li 元素上的 JavaScript“onClick”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18959606/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JavaScript "onClick" on li elements
提问by ogdabou
I made a menu bar with uland liand I want some onClickevents linked to JavaScript functions.
我用uland制作了一个菜单栏，li我想要一些onClick链接到 JavaScript 函数的事件。
But it does not work, clicking on menus don't do anything at all.
但它不起作用，单击菜单根本不执行任何操作。
The function is on a JS file I already use and I tested it on another element, it seems that id doesn't work only inside of my li.
该函数位于我已经使用的 JS 文件中，我在另一个元素上对其进行了测试，看来 id 不仅在我的li.
Here is the HTML:
这是 HTML：
<div id="header">
<div id="titleContainer">
blablabl
</div>
<ul id="menuContainer">
<li class="menuItem" id="videoMenu">
<a href="#" onClick="showAbout2();"> Video</a>
</li>
<li class="menuItem" id="playlistMenu">
Playlist
</li>
<li class="menuItem" id="aboutMenu">
About
</li>
<li class="menuItem" id="controlsMenu">
Controls
</li>
</ul>
</div>
The CSS:
CSS：
#titleContainer
{
box-shadow: 0px 0px 5px #000;
color: lightgrey;
font-size: 20px;
font-weight: bold;
line-height: 50px;
text-align: center;
}
#menuContainer
{
background-color: #333333;
line-height: 35px;
margin: 0;
position: relative;
text-align: center;
z-index: -1;
}
#menuContainer li
{
display: inline;
list-style: none;
}
The JS:
JS：
function showAbout2()
{
console.log("bonjour");
}
ANSWER:
回答：
The answer was :
答案是：
Removing the z-index.
删除 z-index。
I wanted to click on a lower-layered element. So i'll try this http://www.vinylfox.com/forwarding-mouse-events-through-layers/
我想点击一个较低层的元素。所以我会试试这个http://www.vinylfox.com/forwarding-mouse-events-through-layers/
Thanks everyone : )
谢谢大家 ： ）
回答by Harry
Remove the z-indexon the #menuContainer. This is pushing the #menuContainerbehind and hence is preventing the click event from happening/taking effect.
取出z-index的#menuContainer。这是推#menuContainer后，因此阻止点击事件发生/生效。
#menuContainer
{
background-color: #333333;
line-height: 35px;
margin: 0;
position: relative;
text-align: center;
z-index: -1; /*Remove this line.*/
}
function showAbout2() {
console.log("bonjour");
}#titleContainer {
box-shadow: 0px 0px 5px #000;
color: lightgrey;
font-size: 20px;
font-weight: bold;
line-height: 50px;
text-align: center;
}
#menuContainer {
background-color: #333333;
line-height: 35px;
margin: 0;
position: relative;
text-align: center;
}
#menuContainer li {
display: inline;
list-style: none;
}<div id="header">
<div id="titleContainer">blablabl</div>
<ul id="menuContainer">
<li class="menuItem" id="videoMenu"> <a href="#" onClick="showAbout2();"> Video</a>
</li>
<li class="menuItem" id="playlistMenu">Playlist</li>
<li class="menuItem" id="aboutMenu">About</li>
<li class="menuItem" id="controlsMenu">Controls</li>
</ul>
</div>The below update is not part of the original question but is added based on your comments to the answer.
以下更新不是原始问题的一部分，而是根据您对答案的评论添加的。
It seems like removing the z-index: -1is breaking the box-shadoweffect on your website because it is bringing the element back to the front. To overcome this, add the below lines to #titleContainerand #mainContentafter removing the item mentioned in the original answer
似乎删除z-index: -1正在破坏box-shadow您网站上的效果，因为它将元素带回了前面。为了克服这个问题，下面添加线到#titleContainer和#mainContent去除原答复中提到的项目后
z-index: 2;
position: relative;
That will get the shadow back because instead of sending #menuContainerback, we are bringing the other two in front.
这将使影子回来，因为#menuContainer我们没有送回，而是将另外两个带到前面。
回答by thgaskell
Remove z-index: -1, it's preventing you from clicking the link.
删除z-index: -1，它会阻止您单击链接。
CSS
CSS
#menuContainer
{
background-color: #333333;
line-height: 35px;
margin: 0;
position: relative;
text-align: center;
}
回答by John
All you need to do is loop through the list-item elements and add event listeners...
您需要做的就是遍历列表项元素并添加事件侦听器...
var l = document.getElementById('menuContainer').getElementsByTagName('li');
for (var i=0; i<l.length; i++)
{
l[i].addEventListener('click', function() {alert('add any function in place of this alert!');},false);
}
If you need something more specific please comment.
如果您需要更具体的内容，请发表评论。
回答by Minuka ArTy Weerathunga
You have to Remove the z-index on the id tag #menuContainer. This should work
您必须删除 id 标签 #menuContainer 上的 z-index。这应该工作
#menuContainer{
background-color: #333333;
line-height: 35px;
position: relative;
text-align: center;
}
