禁用永久活动状态

Disable permanent active state

本文关键字：活动状态      更新时间：2023-09-26

我有一个链接，如果拖动这个链接然后释放，链接将保持活动状态。

示例：http://jsfiddle.net/Ek43k/3/

<a href="javascript:void(0);" id="foo" >Drag me</a>


#foo:active{
    color:red;
}

我该如何防止这种情况发生？

（仅在IE和FF中）

这是Firefox中的一个已知错误，请参阅https://bugzilla.mozilla.org/show_bug.cgi?id=193321

该错误具有打开和关闭状态，并有多个报告；行为是非标准的，并且是特定于浏览器的。

可以为其构建一个变通方案，但您仍然使用javascript。经过大量搜索，我确定，除非您在特权模式下运行（即您的代码处于扩展中），否则您无法直接影响伪选择器状态。这意味着您只需要添加/删除类名：

<a href="#" onmousedown="this.className = '';" ondragend="this.className = 'inactive';" id="foo" >Drag me</a>

试试看：http://jsfiddle.net/frsRS/

如果您有特权模式，您可以使用Firebug在其CSS面板中使用的方法，使用inIDOMUtils.setContentState

var node = document.getElementById("foo");
var domUtil = Components.classes["@mozilla.org/inspector/dom-utils;1"].getService(Components.interfaces.inIDOMUtils);
domUtil.setContentState( node , 1);

编辑

以下是用于绑定跨浏览器委托而不是将javascript内联的特定代码（此处显示是为了演示，但通常是不好的做法）

function addEvent(ele, evnt, funct) {
  if (ele.addEventListener) // W3C
    return ele.addEventListener(evnt,funct,false);
  else if (ele.attachEvent)  // IE
    return ele.attachEvent("on"+evnt,funct);
}
addEvent(document.body, 'mousedown', function (e) {        
    if(e.target.tagName == 'A') e.target.style.color = '';
});
addEvent(document.body, 'dragend', function (e) {
    if(e.target.tagName == 'A') e.target.style.color = 'blue';
});

试试看：http://jsfiddle.net/HYJCQ/

这使用了元素的样式而不是css类，您可以根据需要交换方法。

Supr建议的另一种方法是从DOM中移除并立即重新添加元素。您也可以使用代理来完成此任务：

function addEvent(ele, evnt, funct) {
  if (ele.addEventListener) // W3C
    return ele.addEventListener(evnt,funct,false);
  else if (ele.attachEvent)  // IE
    return ele.attachEvent("on"+evnt,funct);
}
addEvent(document.body, 'dragend', function (e) {
    if(e.target.tagName != 'A') return;
    var parent = e.target.parentNode;
    var sib = e.target.nextSibling;
    parent.insertBefore(
        parent.removeChild(e.target),
        sib
    );
});

试试看：http://jsfiddle.net/ymPfH/

这两种使用委托的方法都比循环元素更好——这样，脚本将应用于加载后添加到页面的任何a标记（类似于jQuery的live或on方法的工作方式）。

文档

  • Bugzilla条目-https://bugzilla.mozilla.org/show_bug.cgi?id=193321
  • 拖放MDN（ondragend）-https://developer.mozilla.org/en-US/docs/Drag_and_Drop
  • inIDOMUtils-https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/inIDOMUtils

从DOM树中分离并重新附加链接以禁用其活动状态。当拖动结束时这样做，你得到了这个：

$('a').on('dragend',function(){
    var $this   = $(this),
        $parent = $this.parent(),
        $next   = $(this.nextSibling); // $.next() doesn't include text
    $this.detach().insertBefore($next);     
});

无需打乱HTML或CSS，也无需取消:active。似乎在FF和IE中都有效。

编辑：我通常不会为DOM处理编写纯Javascript，所以它的质量可能不是一流的，但这里没有jQuery:

(function(){
    var previousOnload = window.onload || function noop(){};
    window.onload = function (){
        // Call any previously added onload callbacks
        previousOnload();
        // Add deactivator to each <a> element
        var elements = document.getElementsByTagName('a');
        for (var i=0; i<elements.length; i++){
            elements[i].ondragend = deactivate;
        }
        function deactivate(){
            var parent   = this.parentNode,
                position = this.nextSibling;
            parent.removeChild(this);
            // Using insertBefore instead of appendChild so that it is put at the right position among the siblings
            parent.insertBefore(this, position);
        }
    };
})();

我处理了脑海中出现的一些问题，使其完全即插即用。在Opera、Chrome、Firefox和Internet Explorer中进行了测试。

编辑2:受Chris的启发，应用修复程序的另一种方法是直接使用ondragend属性连接deactivator（未测试）：

<head>
    <script>
        function deactivate(){
            var parent   = this.parentNode,
                position = this.nextSibling;
            parent.removeChild(this);
            // Using insertBefore instead of appendChild so that it is put at the right position among the siblings
            parent.insertBefore(this, position);
        }
    </script>
</head>
<body>
    <a href="#" ondragend="deactivate()">Drag me</a>
<body>

缺点是它需要在每个链接上手动/显式地指定带有javascript的ondragend属性。我想这是一个偏好的问题。

最终（？）编辑：查看这些内容和Chris答案的代表/现场版本的评论。

如果jQuery是一个选项，我认为这段代码可以工作，至少在FF中是这样：http://jsfiddle.net/Ek43k/89/

HTML

<a href="#" id="foo" class="inactive" >Drag me</a>

CSS

.inactive:active{color:red;}
.active:active{color:blue;}

jQuery

$('body').on('mousedown', 'a.inactive', function() {
    $(this).on('mousemove', function() {
        $(this).removeClass().addClass('active');
    });
});
$('body').on('mousedown', 'a.active', function() {
    $(this).removeClass().addClass('inactive');
});

只需添加此CSS:

#foo:hover {
    color: green;
}
相关文章：