Question

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

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

#foo:active{
    color:red;
}

我该如何防止这种情况？

（仅限IE和FF）

Answer 1

这是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/

如果您执行具有特权模式，则可以使用inIDOMUtils.setContentState

使用Firebug在其CSS面板中使用的方法

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或{{ 1}}方法工作）。

<强>文档

Bugzilla条目 - https://bugzilla.mozilla.org/show_bug.cgi?id=193321

在MDN上拖放（on） - https://developer.mozilla.org/en-US/docs/Drag_and_Drop

ondragend - https://developer.mozilla.org/en-US/docs/XPCOM_Interface_Reference/inIDOMUtils

Answer 2

从DOM树中分离并重新连接链接以禁用其活动状态。当拖动结束并且你got this：

时执行此操作

$('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，因此质量可能不是最佳，但是here it is without 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的答案。

Answer 3

如果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');
});

Answer 4

只需添加此CSS：

#foo:hover {
    color: green;
}

禁用永久活动状态

4 个答案: