JSFiddle - React, Tailwind, and code Playground

by AndyE

HTML

<a id="one" href="#" onclick="console.log('link one clicked :-(')">link one for testing</a><hr>
<a id="two" href="#" onclick="console.log('link two clicked, just to let you know')">dummy link two</a>

CSS

body{
    -webkit-user-select: none;
}

a {
    font-size:48px;
}


a:active {
    background-color:yellow;
}

JavaScript

// TO TEST:
// click and hold the first link
// the desirect effect would be that the yellow background disappears after a second 
// and releasing the mouse won't cause a "click" on the link.

var l1 = document.getElementById("one");
var l2 = document.getElementById("two");
l1.onmousedown = function() {
    setTimeout(de_focus, 1000);
}
   
    
// The following function should cause all <A> elements in the document to loose 
// the ":active" pseudo-class indicating to the user that the link is no longer "selected".
//
// The function will be part of a kinetic scrolling component and will NOT know about the 
// links in the document (unless looking at the DOM of course).
// 
// This just needs to work in WebKit!
function de_focus() {
    console.log("removing focus (yellow background hopefully disappears)");
    
    // already tried without luck:
    // l2.click(); 
    // l2.focus();
    // l1.blur();


    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.removeChild(aEl);
        nEl.insertAdjacentElement("beforebegin", aEl);
    } 

    // this avoids the "click" but does not remove the ":active" style:
    // (it's a dark blocking layer)
    var dd = document.createElement("div");
    dd.style.position = "absolute";
    dd.style.top = dd.style.left = dd.style.right = dd.style.bottom = "0";
    dd.style.background = "rgba(0,0,0,0.2)"; // just for testing
    dd.onmouseup = function() {
        dd.parentNode.removeChild(dd);
    }
    document.body.appendChild(dd);    
}