FF交换节点后原来的时间丢失。。。

function insertEle(currEle, newEle, parent) {
if (typeof currEle.insertAdjacentElement == "function") {
currEle.insertAdjacentElement("beforeBegin", newEle);
} else {
parent.insertBefore(newEle, currEle);
}
}

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

晕，，我表达能力太差了页面分3部分，，上面的右边是相片，下面是编辑区，相片可以拉到编辑区进行排序，在编辑区的相片可以拖动和其它相片换位置。。
问题就是出在换位置这里，，在 FF下，如果相片和另一个相片换位置，那它就不能再次更换位置了
我要的效果是可以无限次换位置，，但是在IE下正常，在FF下就不正常了
呀，你标题写错了哈O.o
我看了也糊涂，
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body><div onmousedown="alert('foo');">foo</div><div onmousedown="alert('bar');">bar</div>
<script>
//var p = document.getElementsByTagName('div')[0].cloneNode(true);
//document.getElementsByTagName('div')[0].parentNode.appendChild(p);
//document.getElementsByTagName('div')[0].parentNode.removeChild(document.getElementsByTagName('div')[0]);swapEle(document.getElementsByTagName('div')[0],document.getElementsByTagName('div')[1]);function swapEle(ele1, ele2) {
var p = ele1.parentNode;
var c1 = ele1.cloneNode(true);
var c2 = ele2.cloneNode(true);
insertEle(ele2, c1, p);
insertEle(ele1, c2, p);
p.removeChild(ele1);
p.removeChild(ele2);
}
function insertEle(currEle, newEle, parent) {
if (typeof currEle.insertAdjacentElement == "function") {
currEle.insertAdjacentElement("beforeBegin", newEle);
} else {
parent.insertBefore(newEle, currEle);
}
}</script>
</body>
</html>交换的代码没有问题，以后不要打错字的说O.o
看看这个例子
元素是用DOM创建的<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div id="box"></div>
<script>
d1 = document.createElement("div");
d1.innerHTML = "Hello";
d1.onclick = function(){alert('Hello');}
d1.id = "d1";
d2 = document.createElement("div");
d2.innerHTML = "world";
d2.id = "d2";
d2.onclick = function(){alert('world');}
$("box").appendChild(d1);
$("box").appendChild(d2);
function $(id) {
return document.getElementById(id);
}
function swapEle(ele1, ele2) {
var p = ele1.parentNode;
var c1 = ele1.cloneNode(true);
var c2 = ele2.cloneNode(true);
insertEle(ele2, c1, p);
insertEle(ele1, c2, p);
p.removeChild(ele1);
p.removeChild(ele2);
}
function insertEle(currEle, newEle, parent) {
if (typeof currEle.insertAdjacentElement == "function") {
currEle.insertAdjacentElement("beforeBegin", newEle);
} else {
parent.insertBefore(newEle, currEle);
}
}</script>
<a onclick = "swapEle($('d1'),$('d2'));">exchange</a>
</body>
</html>
上面的例子，在IE下也会丢失，要用attachEvent添加事件才不会但是Firefox,Opera,Safari都有问题烦死了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div id="box"></div>
<script>
d1 = document.createElement("div");
d1.innerHTML = "Hello";
addEvent(d1, "click", function(){alert('Hello');});
d1.id = "d1";
d2 = document.createElement("div");
d2.innerHTML = "world";
d2.id = "d2";
addEvent(d2, "click", function(){alert('world');});
$("box").appendChild(d1);
$("box").appendChild(d2);
function $(id) {
return document.getElementById(id);
}
function swapEle(ele1, ele2) {
var p = ele1.parentNode;
var c1 = ele1.cloneNode(true);
var c2 = ele2.cloneNode(true);
insertEle(ele2, c1, p);
insertEle(ele1, c2, p);
p.removeChild(ele1);
p.removeChild(ele2);
}
function insertEle(currEle, newEle, parent) {
if (typeof currEle.insertAdjacentElement == "function") {
currEle.insertAdjacentElement("beforeBegin", newEle);
} else {
parent.insertBefore(newEle, currEle);
}
}function addEvent(obj, event, func, stop) {
if (obj.addEventListener) {
obj.addEventListener(event, func, stop || false);
} else if (obj.attachEvent){
obj.attachEvent("on" + event, func);
}
}
</script>
<a onclick = "swapEle($('d1'),$('d2'));">exchange</a>
</body>
</html>
哦，应该是这个样子的说。因为就标准规定而言，id是唯一的！
但是当你复制节点的时候，id值也同样复制了，这个时候id就不是唯一的了，这样一些遵循标准的浏览器就不干了O.o
如果要用你写的交换节点的函数，节点中就不要出现id。这样的话，应该就没有问题了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div id="box"></div>
<script>
d1 = document.createElement("div");
d1.innerHTML = "Hello";
addEvent(d1, "click", function(){alert('Hello');});
d1.id = "d1";
d2 = document.createElement("div");
d2.innerHTML = "world";
d2.id = "d2";
addEvent(d2, "click", function(){alert('world');});
$("box").appendChild(d1);
$("box").appendChild(d2);
function $(id) {
return document.getElementById(id);
}
function swapEle(ele1, ele2) {
var p = ele1.parentNode;
var c1 = ele1.cloneNode(true);
var c2 = ele2.cloneNode(true);
insertEle(ele2, c1, p);
insertEle(ele1, c2, p);
p.removeChild(ele1);
p.removeChild(ele2);
}
function insertEle(currEle, newEle, parent) {
if (typeof currEle.insertAdjacentElement == "function") {
currEle.insertAdjacentElement("beforeBegin", newEle);
} else {
parent.insertBefore(newEle, currEle);
}
}function addEvent(obj, event, func, stop) {
if (obj.addEventListener) {
obj.addEventListener(event, func, stop || false);
} else if (obj.attachEvent){
obj.attachEvent("on" + event, func);
}
}
</script>
<a onclick = "swapEle(document.getElementsByTagName('div')[1],document.getElementsByTagName('div')[2]);">exchange</a>
</body>
</html>
谢谢
～～
不知道你在FF下测试过没有事件一样丢失了。。```在没有点击exchang之前，点击hello会弹出hello,world会弹出world
但是点击exchang之后，节点更换了，，再点击hello或者world都没有触发事件。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div id="box"></div>
<script>
d1 = document.createElement("div");
d1.innerHTML = "Hello";//d1.onclick = function(){alert('Hello')};
d2 = document.createElement("div");
d2.innerHTML = "world";//d2.onclick = function(){alert('world')};if(window.ActiveXObject){
addEvent(d1, "click", function(){alert('Hello');});
d1.id = "d1";
d2 = document.createElement("div");
d2.innerHTML = "world";
d2.id = "d2";
addEvent(d2, "click", function(){alert('world');});}
d1.setAttribute("onclick", "alert('Hello');");
d2.setAttribute("onclick", "alert('world');");
$("box").appendChild(d1);
$("box").appendChild(d2);
function $(id) {
return document.getElementById(id);
}
function swapEle(ele1, ele2) {
var p = ele1.parentNode;
var c1 = ele1.cloneNode(true);
var c2 = ele2.cloneNode(true);
insertEle(ele2, c1, p);
insertEle(ele1, c2, p);
p.removeChild(ele1);
p.removeChild(ele2);
}
function insertEle(currEle, newEle, parent) {
if (typeof currEle.insertAdjacentElement == "function") {
currEle.insertAdjacentElement("beforeBegin", newEle);
} else {
parent.insertBefore(newEle, currEle);
}
}function addEvent(obj, event, func, stop) {
if (obj.addEventListener) {
obj.addEventListener(event, func, stop || false);
} else if (obj.attachEvent){
obj.attachEvent("on" + event, func);
}
}
</script>
<a onclick = "swapEle(document.getElementsByTagName('div')[1],document.getElementsByTagName('div')[2]);">exchange</a>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div id="box"></div>
<script>
d1 = document.createElement("div");
d1.innerHTML = "Hello";//d1.onclick = function(){alert('Hello')};
d2 = document.createElement("div");
d2.innerHTML = "world";//d2.onclick = function(){alert('world')};if(window.ActiveXObject){
addEvent(d1, "click", function(){alert('Hello');});
addEvent(d2, "click", function(){alert('world');});}
d1.setAttribute("onclick", "alert('Hello');");
d2.setAttribute("onclick", "alert('world');");
$("box").appendChild(d1);
$("box").appendChild(d2);
function $(id) {
return document.getElementById(id);
}
function swapEle(ele1, ele2) {
var p = ele1.parentNode;
var c1 = ele1.cloneNode(true);
var c2 = ele2.cloneNode(true);
insertEle(ele2, c1, p);
insertEle(ele1, c2, p);
p.removeChild(ele1);
p.removeChild(ele2);
}
function insertEle(currEle, newEle, parent) {
if (typeof currEle.insertAdjacentElement == "function") {
currEle.insertAdjacentElement("beforeBegin", newEle);
} else {
parent.insertBefore(newEle, currEle);
}
}function addEvent(obj, event, func, stop) {
if (obj.addEventListener) {
obj.addEventListener(event, func, stop || false);
} else if (obj.attachEvent){
obj.attachEvent("on" + event, func);
}
}
</script>
<a onclick = "swapEle(document.getElementsByTagName('div')[1],document.getElementsByTagName('div')[2]);">exchange</a>
</body>
</html>ie ff 有区别，分类讨论
在IE里‘onclick’是一个Event，不能用添加Attribute 的方法 setAttribute 来设定，需要选择DOM的添加Event 的方法如div.attachEvent('onclick',test); 而不能div.setAttribute('onclick','test')
谢谢，，但是我们好像不是在说同一件事。d1和d1都有一个click事件，点击以后会弹出对话框。如果点击exchang后，会把d1和d2的位置交换，但是在FF下，d1和d2交换位置后之前注册的事件丢失了，也就是点击后不会弹出对话框了。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div id="box"></div>
<script>
d1 = document.createElement("div");
d1.innerHTML = "Hello";
addEvent(d1, "click", function(){alert('Hello');});
d1.id = "d1";
d2 = document.createElement("div");
d2.innerHTML = "world";
d2.id = "d2";
addEvent(d2, "click", function(){alert('world');});
$("box").appendChild(d1);
$("box").appendChild(d2);
function $(id) {
return document.getElementById(id);
}
function swapEle(ele1, ele2) {
var p = ele1.parentNode;
var c1 = ele1.cloneNode(true);
var c2 = ele2.cloneNode(true);
insertEle(ele2, c1, p);
insertEle(ele1, c2, p);
p.removeChild(ele1);
p.removeChild(ele2);
}
function insertEle(currEle, newEle, parent) {
if (typeof currEle.insertAdjacentElement == "function") {
currEle.insertAdjacentElement("beforeBegin", newEle);
} else {
parent.insertBefore(newEle, currEle);
}
}function addEvent(obj, event, func, stop) {
if (obj.addEventListener) {
obj.addEventListener(event, func, stop || false);
} else if (obj.attachEvent){
obj.attachEvent("on" + event, func);
}
}
</script>
<a onclick = "swapEle($('d1'),$('d2'));">exchange</a>
</body>
</html>
我测试过的，可以实现你的效果。以下代码保存一个html文件。
在ff和ie下通过<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head><body>
<div id="box"></div>
<script>
d1 = document.createElement("div");
d1.innerHTML = "Hello";//d1.onclick = function(){alert('Hello')};
d2 = document.createElement("div");
d2.innerHTML = "world";//d2.onclick = function(){alert('world')};if(window.ActiveXObject){
addEvent(d1, "click", function(){alert('Hello');});
addEvent(d2, "click", function(){alert('world');});}
d1.setAttribute("onclick", "alert('Hello');");
d2.setAttribute("onclick", "alert('world');");
$("box").appendChild(d1);
$("box").appendChild(d2);
function $(id) {
return document.getElementById(id);
}
function swapEle(ele1, ele2) {
var p = ele1.parentNode;
var c1 = ele1.cloneNode(true);
var c2 = ele2.cloneNode(true);
insertEle(ele2, c1, p);
insertEle(ele1, c2, p);
p.removeChild(ele1);
p.removeChild(ele2);
}
function insertEle(currEle, newEle, parent) {
if (typeof currEle.insertAdjacentElement == "function") {
currEle.insertAdjacentElement("beforeBegin", newEle);
} else {
parent.insertBefore(newEle, currEle);
}
}function addEvent(obj, event, func, stop) {
if (obj.addEventListener) {
obj.addEventListener(event, func, stop || false);
} else if (obj.attachEvent){
obj.attachEvent("on" + event, func);
}
}
</script>
<a onclick = "swapEle(document.getElementsByTagName('div')[1],document.getElementsByTagName('div')[2]);">exchange</a>
</body>
</html>
不过，我用的是新建一个，再把原来的属性复制过去，再添加事件。。
因为用setAttribute的话，只能用字符串代替