在IE浏览器中，点击DIV只有在文本上才会触发Jquery click事件，而不是在整个DIV上触发。

Question

我有一个 DIV：

 <div id="leftBoxTools" class="toolboxHeaders" style="margin-top: 10px; width: 100%">
                    TOOLS</div>

我想在某人单击任何位置时触发单击事件，以便我可以制作一种可折叠的工具箱：

 $(".toolboxHeaders").click(function () {
    $(this).next().slideToggle("slow");
});

在火狐和谷歌中正常工作，但在ie9中仅当您点击实际文本而非div中的任何位置时才起作用... 有什么想法吗？

更新： 为了澄清一下，这全部发生在JQ UI对话框中。不确定是否会引起问题。我已经查看了此帖子中的JSFiddle，它们在IE9中都可以正常工作。然而，我仍然无法让我的特定问题起作用。

我还在使用使用框架和主页面（guh）的旧aspx应用程序中进行所有这些操作，因此很难判断是什么原因导致了这个问题。

我已将doctype更改为HTML5，但仍无法在除文本以外的任何内容上触发单击事件。

- Todd Vance

---

阅读：http://www.quirksmode.org/js/events_order.html - Diodeus - James MacFarlane

这可能是CSS的问题。我的意思是div的width（宽度）。尝试将width:100%替换为width:500px。 - Jashwant

可能是由于div中的透明度引起的堆叠上下文问题吗？http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ - johnsnails

Answer 1

我遇到了同样的问题，后来发现在我的CSS文件中有以下内容： { z-index: -1} 删除后一切正常。这就是为什么它们在JSFiddle上能够工作而在我的地方不能工作的原因。

- Bryan

Answer 2

在IE9中它运行良好（jsfiddle）

以下是代码：

 <div id="leftBoxTools" class="toolboxHeaders" style="margin-top: 10px; width: 100%; height:60px; background-color:red;">
                TOOLS

</div>
<div>another </div>

JS：

$(".toolboxHeaders").click(function () {
    $(this).next().slideToggle("slow");
});

点击红色区域的任意位置，带有内容“another”的div将会向上/向下滑动。

- Pencho Ilchev

Answer 3

请仔细检查您正在使用的DOCTYPE。

我进行了实时测试，http://jsfiddle.net/kYcD9/，在IE9中运行良好。

- Marc Uberstein

Answer 4

也许我遇到这个问题的原因不同，但对我来说解决它的方法是给 div 元素添加背景属性：

.myactivediv {
    ...
    background: #E8E6EE;
    ...
}

- ceiroa

---

在这种情况下，可能与“堆叠上下文”有关，参见philipwalton.com/articles/what-no-one-told-you-about-z-index。 - johnsnails