4

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.

Udo G
  • 12,572
  • 13
  • 56
  • 89
  • Asked before: http://stackoverflow.com/questions/311052/setting-css-pseudo-class-rules-from-javascript – Frank van Wijk Mar 28 '12 at 10:11
  • I haven't tested, but maybe you can created a mouseup event in javascript, so the browser thinks the button is released? – Mr Lister Mar 28 '12 at 10:12
  • @Mickey: not exactly the same. I just need to clear the ":active", so assuming that there can be only one ":active" element at a time, it would be enough to set another element as active (but no clue how to do that). – Udo G Mar 28 '12 at 11:40
  • @Mr Lister: just tried that. That causes the link to be "clicked" but it remains ":active", unfortunately. – Udo G Mar 28 '12 at 11:43
  • @FrankvanWijk rather than being so quick to point out potential duplicates and helping absolutely no one, maybe you should spend a moment to read the question and realize it is, in fact, a very different question. – devios1 Apr 11 '17 at 20:54

1 Answers1

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 , I'm assuming you're in control of the environment and don't need to worry about legacy browsers.

devios1
  • 36,899
  • 45
  • 162
  • 260
Andy E
  • 338,112
  • 86
  • 474
  • 445
  • Wonderful! That's working just fine. I'm not really happy about the removeChild/insertChild hack, but at least that works. Is there a specific reason why you used insertAdjacentElement() instead of the standard insertBefore() ? – Udo G Mar 28 '12 at 14:50
  • @UdoG: just a bit of a brain malfunction. I changed it very shortly afterwards (as you can see in the answer's code), but forgot to [update the link](http://jsfiddle.net/AndyE/LkAXd/4/). Oh well. :-) – Andy E Mar 28 '12 at 15:00