javascript - 禁用永久事件状态

Question

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

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

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

如果您确实有特权模式，您可以使用 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);

编辑

这里是绑定(bind)跨浏览器委托(delegate)的特定代码，而不是将 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 中删除并立即重新添加元素。您也可以使用委托(delegate)来完成此操作:

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/

这两种利用委托(delegate)的方法都比循环元素更好——这样，脚本将应用于加载后添加到页面的任何 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