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

【问题标题】：Click only works when clicking div text, not the rest of the div单击仅在单击 div 文本时有效，而不是 div 的其余部分
【发布时间】：2015-11-17 20:27:47
【问题描述】：

更新

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

https://jsfiddle.net/noL14v9w/1/

原帖

我在 IE10 中。我有一个方形 div，300 像素 x 300 像素。在 div 里面，我有一些文字。如果我单击文本，它会触发我的单击事件。如果我点击 div 而不是文本，它不会触发点击事件。

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

HTML：

<div class="openStartAuditButton" onclick="alert('WTF');">asdf</div>

CSS：

.openStartAuditButton{
    height:300px;
    width:300px;
    margin-top:20px;
    font-size:24px;
    background-color:grey;
    color:white;       
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}

.openStartAuditButton:hover{
    background-color:lightgrey;
}

/* I also have box sizing set on all elements, but removing this does nothing: */

* {
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box; 
}

文档类型：

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

应用规则：

【问题讨论】：

this jsfiddle 似乎对我有用，我错过了什么吗？
“不在 div 中的其他任何地方”是什么意思..
@scaisEdge 我的意思是任何非文本的地方。仅当我单击文本时才会触发单击。如果我单击 div 但不是在文本上，它不会触发。它有一个固定的宽度和高度，所以文本不会填满 div。
@ScottKaye 那个小提琴也适合我，我认为它可能是我网站上的其他东西在做，但我不知道是什么。我希望有人知道导致此问题的 IE 异常快速并知道修复方法。
即使在 IE 9 上似乎也对我有用（IE8 jsFiddle 停止工作..）。

标签： javascript html css internet-explorer-10

【解决方案1】：

回答你的问题为什么会发生：

是的，是height:100%与z-index:99结合造成的。
100% 的高度使navHolder 成为整个窗口的大小，并且由于navHolder 具有很高的 z-index (99)，它将位于所有元素的顶部。

移除 100% 高度，将确保 navHolder 不再与下面的元素重叠，并使您的点击工作。

为什么它对文本起作用，有点奇怪（在 chrome 中它不起作用）。

编辑
我发现了为什么它在 IE 10 中很奇怪：http://alex.leonard.ie/2013/01/27/ie-bug-text-ignores-z-index-of-higher-elements/。这是一个已知的错误。

【讨论】：

谢谢，z-index 较高的文本也是我怀疑的地方。
@MrBurger 更改了我的答案，请参阅链接。
是的，我现在也学会了，IE是一个很好的浏览器，没有它，问题就会少很多:)。

【解决方案2】：

我会回答我自己的问题，但我不知道为什么会这样，如果你知道为什么会这样，请随时回答。我从 jsfiddle 中的 #navHolder 中删除了 height:100% 并且它可以工作。行为仍然很奇怪，不是我所期望的。也许它与z-index 或position:fixed 有关？

固定 jsfiddle：https://jsfiddle.net/noL14v9w/2/

【讨论】：

【解决方案3】：

您的#navHolder 有height: 100% 和z-index: 99。与此同时，您的 .openStartAuditButton 没有设置 z-index 和位置。这意味着它位于覆盖整个窗口的#navHolder 之下。作为解决方案，您可以设置

#navHolder{
   height: 26px;
}

【讨论】：

谢谢。我想通了，但我的问题是，如果将鼠标悬停在文本上，为什么它仍然有效？（至少在 IE10 中）