使用IE10中的工作:活动css规则使整个div可单击

Question

我正在为一个包含多个文本元素和图像的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小提琴来展示场景:

http://jsfiddle.net/S9JrH/13/

更新:感谢David Thomas指出代码中的拼写错误并确认这在Chrome中有效.

不幸的是,在IE10中,只有当您单击div的下半部分时,才能使用此文本.

有谁知道如何在IE10中正常工作？

Answer 1

目前不可能(我认为)

从我可以收集的信息来看,目前这是不可能的,因为:active孩子的状态不会传播到父母div.:active在使用div元素进行测试时,Internet Explorer 10和Opera 11.64都无法将状态传播到父级.

小提琴:http://jsfiddle.net/jonathansampson/UrN39/

解决方法

想到的唯一其他解决方案是在JavaScript中使用事件传播.幸运的是,mousedown的事件将在DOM上传播到父节点上div.以下示例使用jQuery:

$(".myButton").on("mousedown mouseup mouseleave", function(e){
    $(this).toggleClass( "active", e.type === "mousedown" );
});

请注意,我已将:active伪类修改为实际类.active.这已在IE10中测试过并且有效.鉴于这种方法,它应该在几乎所有主流浏览器中都没有任何问题.

小提琴:http://jsfiddle.net/jonathansampson/S9JrH/8/

Answer 2

为什么不使用HTML <button>元素.它是为您的案例而创建的.按钮获取时,Div不会聚焦.