Question

I’ve implemented my own kinetic scrolling component that generally works very well. My problem is that link elements in the page that use the :active pseudo-class maintain their :active state even when the user swipes and thus scrolls the screen (which means that the mouseup won’t generate a “click”).

Currently I already can avoid the “click” event but the visual feedback (:active) does not match the behavior.

So I need to directly or indirectly clear the “:active” via JavaScript. Perhaps creating a dummy link and “activate” it via JavaScript would solve the problem, but I had no luck with that.

To find a solution a made a simple testcase that demonstrates this: http://jsfiddle.net/LkAXd/2/

Any ideas?

Note I just need a solution that works with Webkit.

Update

This dirty hack clears the :active pseudoclass from the element l1 (basically by briefly removing it from the document):

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

The problem is that document.activeElement apparently does not reference links that just got a mousedown (they don’t get focus that way), so I have no way to know which element currently is :active.

Answer 1

I’m not sure if I fully understood what you’re trying to do, but you can get the active element using document.querySelector.

Adding the following code to your test case worked for me:

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);
} 

Working demo: http://jsfiddle.net/AndyE/LkAXd/3/

Since you tagged webkit, I’m assuming you’re in control of the environment and don’t need to worry about legacy browsers.