我有一个链接,如果你拖动这个链接然后松开,这个链接会保持活跃状态。
示例: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);
编辑
这里是绑定(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
关于javascript - 禁用永久事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12106355/