使用Javascript激活元素的：active CSS伪类？ [英] Activate an element's :active CSS pseudo-class using Javascript?
问题描述
这是否可能？
例如，如果用户按下return键并触发mousedown事件， with：active styles？
For example, if a user presses the "return" key and I trigger the "mousedown" event, how do I also render the element with :active styles?
我知道可以使用类来做到这一点，但是我更喜欢使用预先存在的：活动的样式。
I know it is possible to do this using classes, but I'd greatly prefer to use the pre-existing :active styles.
推荐答案
根据 CSS 2.1 spec ，the active pseudo-class applies while：
According to the CSS 2.1 spec, the :active pseudo-class applies while:
由用户。例如，在
之间，用户按下鼠标按钮并释放它。
an element is being activated by the user. For example, between the times the user presses the mouse button and releases it.
您应该能够发送mousedown事件与主题元素作为事件目标，它应该保持活动，直到匹配的mouseup事件被分派。如果它工作，它可能不会可靠地工作在足够的浏览器，使其有用。
You should be able to dispatch a mousedown event with the subject element as the event target and it should stay active until a matching mouseup event is dispatched. If it works, it likely won't work reliably on enough browsers to make it useful.
添加/删除一个合适的类会简单得多（并得到更广泛的支持）。
It would be much simpler (and more widely supported) to add/remove a suitable class.
以下是使用DOMActivate的示例。您可以看到，在元素上分派activate事件会触发关联的onactivate侦听器，但不会更改正在激活的元素的外观。
Here is an example of using DOMActivate. You can see that dispatching an activate event on an element fires the associated onactivate listener, but doesn't change the appearance of the element being activated.
也许您可以模拟动作通过侦听activate事件，添加一个类来突出显示该元素，然后使用 setTimeout 或类似方法删除它。
Perhaps you can simulate actiation by listening for the activate event, adding a class to highlight the element, then remove it after a few moments using setTimeout or similar.
<style type="text/css">
p:active {
background-color: red;
}
div:active {
background-color: green;
}
</style>
<script type="text/javascript">
function Init () {
var p, ps = document.getElementsByTagName('p');
var d = document.getElementById('div0');
if (ps.length && ps[0].addEventListener) {
for (var i=0, iLen=ps.length; i<iLen; i++) {
p = ps[i];
p.addEventListener ("DOMActivate", onActivate, false);
}
d.addEventListener("DOMActivate", onActivate, false);
}
}
function onActivate () {
console.log(this.id + ' has been activated');
}
function simulateActive(id) {
var evt = document.createEvent("UIEvents");
evt.initUIEvent("DOMActivate", true, false, window,1);
var el = document.getElementById(id);
var cancelled = !el.dispatchEvent(evt);
if(cancelled) {
console.log("cancelled");
} else {
console.log("not cancelled");
}
}
</script>
</head>
<body onload="Init ();">
<div id="div0">div
<p id="para0">para0</p>
<p id="para1">para1</p>
<button onclick="
simulateActive('para0');
">Activate para</button>
</div>
<button onclick="
simulateActive('para0');
">Activate para</button>
</body>
这篇关于使用Javascript激活元素的：active CSS伪类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
