使用 :active css rule in IE10 使整个 div 可点击答案

【问题标题】：Make a whole div clickable with working :active css rule in IE10使用 :active css rule in IE10 使整个 div 可点击
【发布时间】：2012-06-05 08:27:11
【问题描述】：

我正在为一个包含多个文本元素和图像的 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：

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

更新：感谢 David Thomas 指出代码中的错字并确认这在 Chrome 中有效。

不幸的是，在 IE10 中，这仅在您单击 div 的下部，远离文本时才有效。

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

【问题讨论】：

请注意：boborder-width: 1px; 应该是 border-width: 1px;。
@ShaquinTrifonoff：谢谢，已更正。

标签： html css internet-explorer-10

【解决方案1】：

目前不可能（我认为）

据我所知，目前这是不可能的，因为孩子的 :active 状态不会传播到父 div。在使用 div 元素进行测试时，Internet Explorer 10 和 Opera 11.64 都无法将 :active 状态传播到父级。

小提琴：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/

【讨论】：

我建议还将“mouseleave”添加到我们监听的事件列表中，否则如果您在按住鼠标按钮的同时将鼠标移出元素，则会保持活动状态。
IE 开发团队将此问题归类为“无法修复”。 connect.microsoft.com/IE/feedback/details/757765/…

【解决方案2】：

为什么不使用 HTML <button> 元素。它是为您的案例创建的。 Div 没有获得焦点，而按钮获得了焦点。

【讨论】：

可以在按钮内嵌套其他内容吗？
是的，当然。 <button> 就像<input type='submit' /> 一样，在点击时自动提交表单，但也可以让你在其中嵌入其他 HTML 标记。但是，虽然您可以在 <button> 中嵌入 <div> 和 <p> 以及（块级元素）之类的元素，但您不应该这样做。仅使用内联元素，例如 <a> 和 <span>。
我真的很想在这个特殊的“按钮”中使用更复杂的元素
见Heading elements 和Content categories。看起来几乎任何东西都可以进入<button>...
我可以确认

【解决方案3】：

您可以在要忽略鼠标事件的子元素上使用 CSS pointer-events: none;，它会适当地冒泡到其父元素。

【讨论】：

【解决方案4】：

我使用:after 覆盖元素，这样子元素就无法点击。

.myButton:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
    opacity: 0;
    filter: alpha(opacity=0);
}

【讨论】：

【解决方案5】：

.myButton:active, .myButton *:active{
  -ms-transition-duration: 0.2s;
  -ms-transform: scale(0.95);
}

老实说，我不知道你是否可以在 IE 中使用 *:pseudo-selector，但你可以使用 chrome，所以值得一试。

【讨论】：

是的，你可以使用 *: 但当然活动动画只会应用于被点击的元素，而不是整个 div 容器
.myButton *:active 与 .myButton :active 相同。