javascript - 禁用永久活动状态

Question

我有一个链接，如果你拖动这个链接然后松开，链接会保持他的活动状态。

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

#foo:active{
    color:red;
}

我怎样才能防止这种情况？

（仅在 IE 和 FF 中）

score 7 · Accepted Answer

这是 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加载后添加到页面的任何标签（类似于 jQuerylive或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

score 3 · Accepted Answer

从 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>

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

最终（？）编辑：请参阅这些代表/现场版本的评论和克里斯的回答。

score -1 · Accepted Answer

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

score -3 · Accepted Answer

-3

只需添加这个 CSS：

#foo:hover {
    color: green;
}

于 2012-08-31T10:52:49.207 回答

javascript - 禁用永久活动状态

4 回答 4

Related

Reference