在IE10中使用working :active css规则使整个div可点击
我正在为一个html应用程序设计一个可点击的面板，其中包含多个文本元素和图像。
据我所知，这通常是使用div完成的。如下所示：
<div class="myButton">
<h2>Text</h2>
<h3>Some more text</h3>
<img ...>
</div>使用一些样式和挂钩的点击事件，这可以很好地工作，但我在样式的活动状态有问题：
.myButton {
cursor:pointer;
}
.myButton:active{
-ms-transition-duration: 0.2s;
-ms-transform: scale(0.95);
}在这个例子中，我尝试做一个css动画(仅限IE)，但这实际上可以是任何东西。问题是，只有当我单击div时，活动状态才会起作用，但当我单击div的任何子级时，活动状态都不起作用。
下面是一个展示该场景的JS Fiddle：
更新：感谢David Thomas指出代码中的一个拼写错误，并确认此功能在Chrome中有效。
不幸的是，在IE10中，只有当你点击div的下半部分，而不是文本时，这才能起作用。
有谁知道如何在IE10中正常工作吗？
回答 5
Stack Overflow用户
发布于 2012-06-05 01:24:03
目前不可能(我认为)
据我所知，这目前是不可能的，因为子对象的:active状态不会向上传播到父对象div。在测试div元素时，Internet Explorer10和Opera11.64都无法将:active状态向上传播到父级。
小提琴：http://jsfiddle.net/jonathansampson/UrN39/
解决方法
唯一想到的其他解决方案是在JavaScript中使用事件传播。幸运的是，鼠标按下的事件将在DOM上向上传播，并传播到父div上。以下示例使用jQuery：
$(".myButton").on("mousedown mouseup mouseleave", function(e){
$(this).toggleClass( "active", e.type === "mousedown" );
});这里请注意，我已经将:active伪类修改为实际的类.active。这已经在IE10中进行了测试，并且工作正常。考虑到这种方法，它应该在几乎所有主流浏览器中都能正常工作。
Stack Overflow用户
发布于 2012-05-31 13:26:26
为什么不使用超文本标记语言<button>元素呢？它是为您的案例而创建的。Div不获取焦点，而button获取。
Stack Overflow用户
发布于 2014-10-07 06:23:10
您可以在想要忽略鼠标事件的子元素上使用CSS pointer-events: none;，它将适当地冒泡到其父元素。
https://stackoverflow.com/questions/10827534
复制相似问题