Javascript 单击仅在单击div文本时有效，而不是单击div的其余部分_Javascript_Html_Css_Internet Explorer 10

Javascript 单击仅在单击div文本时有效，而不是单击div的其余部分

javascript html css

Javascript 单击仅在单击div文本时有效，而不是单击div的其余部分,javascript,html,css,internet-explorer-10,Javascript,Html,Css,Internet Explorer 10,更新我添加了一个JSFIDLE，其中包含了来自该站点的更多代码。这个就像我描述的那样。我希望能尽快添加额外的代码，但是样式表有1000多行，我不知道什么是相关的原创帖子我在IE10。我有一个正方形的div，300px乘300px。在div里面，我有一些文本。如果我单击文本，它将触发我的单击事件。如果单击div而不是文本，则不会触发click事件当我设置CSS悬停类时，也会出现同样的问题。仅当我将鼠标悬停在文本上时，才会应用悬停规则，而不是在div中的任何其他位置 HTML: asdf

更新

我添加了一个JSFIDLE，其中包含了来自该站点的更多代码。这个就像我描述的那样。我希望能尽快添加额外的代码，但是样式表有1000多行，我不知道什么是相关的

原创帖子

我在IE10。我有一个正方形的div，300px乘300px。在div里面，我有一些文本。如果我单击文本，它将触发我的单击事件。如果单击div而不是文本，则不会触发click事件

当我设置CSS悬停类时，也会出现同样的问题。仅当我将鼠标悬停在文本上时，才会应用悬停规则，而不是在div中的任何其他位置

HTML:

asdf

CSS:

DOCTYPE:

<!DOCTYPE html>
<html lang="en">
   ...

...

适用规则：

我会回答我自己的问题，但我不知道为什么会这样，所以如果你知道为什么会这样，请随意回答。我从JSFIDLE中的

#navHolder

中删除了

高度：100%

，它可以正常工作。behvaiour仍然很奇怪，这不是我所期望的。也许它与

z-index

或

位置：fixed

有关

修复了jsfiddle:

以回答您的问题：为什么会发生这种情况：

是的，它是由

高度：100%

与

z-index:99

一起引起的
100%的高度使

navHolder

成为整个窗口的大小，并且由于

navHolder

具有较高的z指数（99），它将位于所有元素的顶部

删除100%的高度，将确保导航支架不再与下面的元素重叠，并使您的单击生效

为什么它能在文本上工作，这有点奇怪（在chrome中它不能）

编辑
我发现了为什么在IE 10中它会很奇怪：。这是一个已知的错误。

您的

#navHolder

具有

高度：100%

和

z-index:99

。同时，您的

.openStartAuditButton

没有z索引和位置设置。这意味着它位于覆盖整个窗口的

#navHolder

下方。作为解决方案，您可以设置

#navHolder{
   height: 26px;
}

它似乎对我有用，我是否遗漏了什么？你说的“不在分区中的任何其他地方”是什么意思。@scaisEdge我指的是任何不是文本的地方。单击仅在我单击文本时触发。如果我单击div，但没有单击文本，则不会触发。它有一个设定的宽度和高度，所以文本不会填充分区。@ScottKaye，fiddle对我也适用，我想可能是我网站上的其他东西在做它，但我不知道是什么。我希望有人知道IE的一个奇怪的快速导致这一点，并知道修复。似乎对我来说，即使在IE 9（IE8 JSFIDLE停止工作…）工作。谢谢。我明白了，但我的问题是，如果你把鼠标悬停在文本上，为什么它仍然有效？（至少在IE10中）谢谢，z指数较高的文本也是我怀疑的地方。@Burger先生更改了我的答案，请参阅链接。是的，我现在也学会了，IE是一个非常好的浏览器，没有它，问题就会少很多：）。

#navHolder{
   height: 26px;
}