使整个div可点击与工作：活动css规则在IE10 [英] Make a whole div clickable with working :active css rule in IE10

问题描述

我为一个包含多个文本元素和图片的html应用程序设计了一个可点击的面板。

I'm designing a clickable panel for an html app which contains multiple text elements and images.

根据我的理解，这通常是使用div。像这样：

From what I understand this is generally done with a div. Something like this:

<div class="myButton">
    <h2>Text</h2>
    <h3>Some more text</h3>
    <img ...>
</div>

有点风格和挂钩点击事件这工作正常，但我有样式的问题活动状态：

With a bit of styling and hooking up the click event this works fine but I am having problem with styling the active state:

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

在这个例子中，我试图做一个css动画但这真的可以是什么。
问题是活动状态只有当我点击div，但是当我点击任何div的孩子不工作。

In this example I'm trying to do a css animation (IE only) but this could really be anything. The problem is that the active state only works when I click on the div but doesn't work when I click on any of the children of the div.

这是一个JS小提琴来显示场景：

Here is a JS Fiddle to show the scenario:

http：// jsfiddle .net / S9JrH / 13 /

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

UPDATE: Thanks to David Thomas for pointing out a typo in the code and confirming that this works in Chrome.

不幸的是，在IE10中，只有当您点击div的下部，而不是文本时，它才有效。

Unfortunately, in IE10 this only works when you click on the lower part of the div, away from the text.

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

Does anyone know how to get this working properly in IE10?

推荐答案

认为）

从我可以收集的，这是目前不可能的，因为：active 不传播到父 div 。当使用 div 元素测试时，Internet Explorer 10和Opera 11.64都无法将：active 状态传播到父级。

Currently not possible (I think)

From what I can gather, this is currently not possible as the :active state of a child is not propagated up to the parent div. Both Internet Explorer 10 and Opera 11.64 failed to propagate the :active state up to the parent when testing with div elements.

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

想到的另一个解决方案是在JavaScript中使用事件传播。幸运的是mousedown的事件将在DOM上传播到父<@ c $ c> div 上。以下示例使用jQuery：

The only other solution that comes to mind would be to use event propagation in JavaScript. Fortunately the events of a mousedown will propagate up on the DOM, and onto the parent div. The following example utilizes jQuery:

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

注意，我修改了：active 伪类成为一个实际的类 .active 。这已经过测试在IE10和工程。给定的方法，它应该工作没有任何问题，在每一个主要的浏览器。

Note here that I have modified the :active pseudo-class to be an actual class .active. This has been tested in IE10 and works. Given the approach, it should work without any problem in just about every major browser.

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

这篇关于使整个div可点击与工作：活动css规则在IE10的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！