使用 JavaScript 清除当前元素上的活动伪类

Question

我已经实现了我自己的动态滚动 组件，它通常工作得很好。我的问题是页面中使用 :active 伪类的链接元素保持其 :active 状态，即使用户滑动并滚动屏幕（这意味着 mouseup 不会生成“点击”）。

目前我已经可以避免“点击”事件，但视觉反馈 (:active) 与行为不匹配。

所以我需要通过 JavaScript 直接或间接清除 ":active"。也许创建一个虚拟链接并通过 JavaScript “激活”它可以解决问题，但我没有运气。

为了找到解决方案，我们制作了一个简单的测试用例来证明这一点：http://jsfiddle.net/LkAXd/2/

有什么想法吗？

请注意，我只需要一个适用于 Webkit 的解决方案。

更新

这个肮脏的 hack 从元素 l1 中清除 :active 伪类（基本上是通过从文档中简单地删除它）：

var next = l1.nextSibling;
document.body.removeChild(l1);
document.body.insertBefore(l1, next);

问题在于 document.activeElement 显然 not 引用了刚刚获得鼠标按下的链接（他们没有那样获得焦点），所以我无法知道当前是哪个元素：活跃。

Answer 1

我不确定我是否完全理解您要执行的操作，但您可以使用 document.querySelector 获取活动元素。

将以下代码添加到您的测试用例对我有用：

var aEl = document.querySelector("a:active"),  // Active Element
    nEl = aEl && aEl.nextSibling,              // The node following it
    pEl = aEl && aEl.parentNode;               // The parent node

if (aEl && pEl) {
    pEl.removeChild(aEl);
    pEl.insertBefore(aEl, nEl);
} 

工作演示：http://jsfiddle.net/AndyE/LkAXd/3/

由于您标记了webkit，我假设您可以控制环境并且无需担心旧版浏览器。