Cancel: active item style

Question

I have DOM elements with CSS style :active. If the user makes a click but never releases the click, I want to remove the style :activethrough Javascript.

I tried to do it document.activeElement.blur(), but it does not work when the user does not issue a click. (See script here .)

How can I make the element smudge if the user hasn’t clicked?

Answer 1

Example

@bobdye does not work because the <div>default elements are not "custom".

tabindex div, .

HTML

<div class="defocus">.::.:.:.::.</div>
<div class="defocus">:..:.:.:..:</div>
<div class="defocus">.::.:.:.::.</div>

class="defocus" , x .

CSS ()

div:active {
    color:lightcoral;
}

JavaScript

(function () {
    window.addEventListener("load", function () {
        var seconds = 0.15 * 1000;
        var defocused = document.getElementsByClassName("defocus");
        for (var i = 0, l = defocused.length; i < l; i++) {
            var el = defocused[i];
            el.style.outline = 0; //optional
            el.setAttribute("tabindex", -1);
            el.addEventListener("mousedown", blur);
        }

        function blur(e) {
            var el = e.target;
            setTimeout(function (el) {
                el.blur();
            }, seconds, el);
        }
    });
})();

• seaf ( ).
• defocus.
• .
  • , , div, .
  • a tabindex="-1". -1 , focus blur .
  • , blur() mousedown, x .
• blur(), setTimeout().

, , !

: ,

. @Adam , seaf var, .

Answer 2

- , 500 .

:

<a id="testlink" href="#">Click this</a>

, , Javascript:

var lnk = document.getElementById('testlink');
var mousedown = false;
var timerId = null;

lnk.addEventListener('mousedown', function(e) {
    mousedown = true;
    timerId = window.setTimeout(function() {
        if (mousedown) {
            lnk.blur();
        }
    }, 500);
});
lnk.addEventListener('click', function(e) {
    mousedown = false;
    window.clearTimeout(timerId);
});

, , " ".

Answer 3

which will be added to other answers, you can use the transition (with a delay or not): http://codepen.io/anon/pen/LEXZGB

*:active {
    background: red;
    filter:blur(5px);
    transition: filter 3s 1s;
}

<script src='http://s.codepen.io/assets/libs/prefixfree.min.js'></script>
see me blured if you click too long.

Run codeHide result