使用JavaScript清除当前元素上的:active伪类

Question

使用JavaScript清除当前元素上的:active伪类

javascriptcsswebkitcss-selectorsqtwebkit

4

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

目前，我已经可以避免“click”事件，但视觉反馈(: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似乎不引用刚被mousedown的链接（它们不会通过这种方式获得焦点），所以我无法知道当前哪个元素是 :active。

- Udo G

之前问过：https://dev59.com/c3VC5IYBdhLWcg3wYQEp - Frank van Wijk

我没有测试过，但也许你可以在JavaScript中创建一个mouseup事件，这样浏览器会认为按钮已经释放了？ - Mr Lister

@Mickey：并不完全相同。我只需要清除“:active”，所以假设一次只能有一个“:active”元素，将另一个元素设置为活动状态就足够了（但不知道如何做）。 - Udo G

@Mr Lister：刚试了一下。这会导致链接被“点击”，但不幸的是它仍然是“:active”。 - Udo G

@FrankvanWijk，你不应该急于指出可能的重复问题，却毫无帮助。也许你应该花点时间阅读问题，并意识到它实际上是一个非常不同的问题。 - devios1

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andy E · Accepted Answer

我不确定我是否完全理解你想做什么，但是你可以使用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，我假设你控制环境并且不需要担心旧版浏览器。