Html 使用 IE10 中的工作 :active css 规则使整个 div 可点击
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10827534/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a whole div clickable with working :active css rule in IE10
提问by Patrick Klug
I'm designing a clickable panel for an html app which contains multiple text elements and images.
我正在为包含多个文本元素和图像的 html 应用程序设计一个可点击面板。
From what I understand this is generally done with a div. Something like this:
据我了解，这通常是用 div 完成的。像这样的东西：
<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);
}
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.
在这个例子中，我试图做一个 css 动画（仅限 IE），但这真的可以是任何东西。问题是活动状态仅在我单击 div 时有效，但在单击 div 的任何子级时不起作用。
Here is a JS Fiddle to show the scenario:
这是一个 JS Fiddle 来显示场景：
UPDATE:Thanks to David Thomas for pointing out a typo in the code and confirming that this works in Chrome.
更新：感谢 David Thomas 指出代码中的错字并确认这在 Chrome 中有效。
Unfortunately, in IE10 this only works when you click on the lower part of the div, away from the text.
不幸的是，在 IE10 中，这仅在您单击 div 的下部（远离文本）时才有效。
Does anyone know how to get this working properly in IE10?
有谁知道如何在 IE10 中正常工作？
回答by Sampson
Currently not possible (I think)
目前不可能（我认为）
From what I can gather, this is currently not possible as the :activestate of a child is not propagated up to the parent div. Both Internet Explorer 10 and Opera 11.64 failed to propagate the :activestate up to the parent when testing with divelements.
据我所知，目前这是不可能的，因为:active孩子的状态不会传播到父母div。:active使用div元素进行测试时，Internet Explorer 10 和 Opera 11.64 都未能将状态传播到父级。
Fiddle: http://jsfiddle.net/jonathansampson/UrN39/
小提琴：http: //jsfiddle.net/jonathansampson/UrN39/
Workaround
解决方法
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:
想到的唯一其他解决方案是在 JavaScript 中使用事件传播。幸运的是 mousedown 的事件会在 DOM 上向上传播，并传播到 parent 上div。以下示例使用 jQuery：
$(".myButton").on("mousedown mouseup mouseleave", function(e){
$(this).toggleClass( "active", e.type === "mousedown" );
});
Note here that I have modified the :activepseudo-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.
请注意，我已将:active伪类修改为实际类.active。这已经在 IE10 中测试过并且有效。鉴于这种方法，它应该可以在几乎所有主要浏览器中正常工作。
回答by Saeed Neamati
Why don't you use HTML <button>element. It's created for your case. Div doesn't take focus, while button gets.
为什么不使用 HTML<button>元素。它是为您的案例创建的。Div 不获取焦点，而按钮获取。
回答by Jay Neiman
You can use the CSS pointer-events: none;on a child element that you would like to disregard mouse events and it will bubble up appropriately to its parent.
您可以pointer-events: none;在要忽略鼠标事件的子元素上使用 CSS ，它会适当地冒泡到其父元素。
回答by Blake Plumb
I overlay the the element using :afterso that children are not clickable.
我覆盖了使用的元素，:after以便子元素不可点击。
.myButton:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #fff;
opacity: 0;
filter: alpha(opacity=0);
}
回答by austinbv
.myButton:active, .myButton *:active{
-ms-transition-duration: 0.2s;
-ms-transform: scale(0.95);
}
I will be honest I have no idea if you can use *:pseudo-selector in IE but chrome you can so it's worth a shot.
老实说，我不知道您是否可以在 IE 中使用 *:pseudo-selector，但 chrome 可以，所以值得一试。
