Question

我有带有:active CSS样式的DOM元素。如果用户点击，但从未发布点击，我希望能够通过Javascript取消:active样式。

我尝试过document.activeElement.blur()但是当用户没有发布点击时，这不起作用。（参见小提琴here。）

如果用户没有释放他们的点击，我该如何强制模糊元素？

Answer 1

@ bobdye＆＃39; s 示例无法正常工作，因为<div>元素无法集中精力＆＃34;默认情况下。

您可以通过为div分配tabindex属性来强制此行为，此处为fiddle。

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中看起来很难看，但它取决于你。
- 然后我们设置tabindex="-1"。使用-1作为索引会阻止其充当tab break point，但允许它接收focus和blur个事件。
- 最后，我们将blur()函数添加到mousedown事件中，该事件将在x秒后散焦 de元素。
然后我们定义blur()函数，该函数将使用setTimeout()来处理散焦元素。

那就是它，希望它有所帮助！

注意：我并不特别关心赏金，请保留你的代表！

注意：感谢@Adam指出seaf的变量需要var前缀以防止它们变成全局。

Answer 2

This Fiddle如果用户按住鼠标超过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

要添加到其他答案中，您可以使用转换（延迟与否）：http://codepen.io/anon/pen/LEXZGB

＆＃13;

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

＆＃13;

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

＆＃13;

取消：活动元素样式

3 个答案:

HTML

CSS（相关）

的JavaScript