这可能吗？
例如,如果用户按下"返回"键并触发"mousedown"事件,我该如何使用:active styles呈现元素？
我知道可以使用类来实现这一点,但我更喜欢使用预先存在的:活动样式.
根据CSS 2.1 规范， :active 伪类适用于：
用户正在激活一个元素。例如，在用户按下鼠标按钮和释放鼠标按钮之间的时间。
您应该能够以主题元素作为事件目标来调度 mousedown 事件，并且它应该保持活动状态，直到调度匹配的 mouseup 事件。如果它有效，它可能无法在足够多的浏览器上可靠地工作以使其有用。
添加/删除合适的类会更简单（并且得到更广泛的支持）。
以下是使用 DOMActivate 的示例。您可以看到，在元素上调度 activate 事件会触发关联的 onactivate 侦听器，但不会更改正在激活的元素的外观。
也许您可以通过监听 activate 事件来模拟激活，添加一个类来突出显示该元素，然后在几分钟后使用setTimeout或类似的方法将其删除。
<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>
| 归档时间： |
|
| 查看次数： |
7849 次 |
| 最近记录： |