Javascript 取消：活动图元样式设置

我有带有

：active

CSS样式的DOM元素。如果用户进行了单击，但从未释放过单击，我希望能够通过Javascript取消

：active

样式设置

我尝试过使用

document.activeElement.blur（）

，但如果用户不释放单击，则无法使用。（见小提琴。）

如果用户不释放单击，如何强制模糊元素？

如果用户按住鼠标超过500毫秒，则取消活动状态的简单示例

它使用一个链接：

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

---

显然不是针对您的特定情况定制的，而是“概念证明”。

@bobdye的示例不起作用，因为

元素在默认情况下不“聚焦”

您可以通过将

tabindex

属性分配给div来强制执行此行为，下面是一个示例

HTML JavaScript

（函数（）{
addEventListener（“加载”，函数（）{
var秒=0.15*1000；
var defocused=document.getElementsByClassName（“defocus”）；
对于（var i=0，l=离焦长度；i

• 首先，我们将这个函数包装在一个类似商品的容器中（它将防止模糊函数和变量被访问）
• 然后我们用一个

  散焦类得到所有元素

• 然后我们迭代它们。
  • 首先，我们消除了一些浏览器使用的焦点轮廓，因为它在div中看起来很难看，但这取决于您
  • 然后我们设置一个

    tabindex=“-1”

    。使用

    -1

    作为索引可以防止它充当索引，但允许它接收

    焦点

    和

    模糊

    事件
  • 最后，我们将

    blur（）

    函数添加到

    mousedown

    事件中，该事件将在x秒后散焦de元素
• 然后我们定义

  blur（）

  函数，该函数将使用

  setTimeout（）

  来处理散焦元素

就这样，希望能有帮助

注意：我并不特别喜欢赏金，保留你的名誉吧

---

注意：感谢您指出SEF的变量需要var前缀，以防止它们成为全局变量。

要添加到其他答案中，您可以使用转换（延迟或不延迟）：

*：活动{
背景：红色；
过滤器：模糊（5px）；
过渡：过滤器3s 1s；
}

如果你点击的时间太长，我会变得模糊。

你能解释一下为什么要取消这个行为吗？@Mouser:当然。我正在构建一个具有web视图的iOS应用程序，我想在拖动时取消

：active

状态。请参阅完整的问题描述。对我来说，这似乎是相当核心的低级别，几乎不可取消。我自己不是一个半途而废的人，但我认为您需要重新考虑如何设置元素的“活动”状态，以便您可以自己控制它。我在小提琴上尝试一些丑陋的代码，它仍然以完美的胜利获胜。是的，看起来很低。如果我不得不重写我所有的

：active

样式，尤其是默认的浏览器样式，我会非常恼火。如果一个解决方案没有出现，我会加500分奖励。我不想作为答案发表文章，但这是一种不同的方法，可以节省你一些时间重写：嗯，看来

blur（）

技术对

div

不起作用。（参见fiddle。）值得注意的是，这在Firefox中没有视觉效果，尽管它确实改变了

文档。activeElement

。没问题，很高兴我能帮上忙！：）

sef

本身并不能阻止模糊变量变得可访问，而

sef

和关键字

var

则可以。例如，代码中的变量

seconds

和

disfocused

现在是全局变量。@Adam nice，修复了它！

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

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

div:active {
    color:lightcoral;
}

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