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

willko 2007-09-15 12:26:16
节点是通过createElement创建的，，事件用dom和html都试过了。。一样会丢失，交换节点以后再添加一样没用。。。。

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);
}

这个是我交换节点的代码。。在IE下OK。。。在FF/下就有问题了。。

http://willko.cn/js/test4.html

先从右边拖2个相片到下边，，然后再拖动它们就可以交换了。。。

我之前也写过交换的，，但是不是用CREATEELEMENT创建的，，不知道是不是这个问题。。。晕死。了`````
...全文
171 20 打赏 收藏 转发到动态 举报
写回复
用AI写文章
20 条回复
切换为时间正序
请发表友善的回复…
发表回复
willko 2007-09-17
  • 打赏
  • 举报
 回复
不过，我用的是新建一个，再把原来的属性复制过去，再添加事件。。
因为用setAttribute的话，只能用字符串代替
willko 2007-09-17
  • 打赏
  • 举报
 回复
..是真的可以。。我在家测试的时候是不行的。。
谢谢````
hejunbin 2007-09-17
  • 打赏
  • 举报
 回复
我测试过的，可以实现你的效果。以下代码保存一个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>
willko 2007-09-16
  • 打赏
  • 举报
 回复
谢谢，，但是我们好像不是在说同一件事。。。。

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>
willko 2007-09-16
  • 打赏
  • 举报
 回复
谢谢
～～
不知道你在FF下测试过没有。。。事件一样丢失了。。```

在没有点击exchang之前，点击hello会弹出hello,world会弹出world
但是点击exchang之后，节点更换了，，再点击hello或者world都没有触发事件。。
hejunbin 2007-09-16
  • 打赏
  • 举报
 回复
<!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>
hejunbin 2007-09-16
  • 打赏
  • 举报
 回复
哦，应该是这个样子的说。因为就标准规定而言，id是唯一的！
但是当你复制节点的时候，id值也同样复制了，这个时候id就不是唯一的了，这样一些遵循标准的浏览器就不干了O.o
如果要用你写的交换节点的函数，节点中就不要出现id。这样的话，应该就没有问题了。
willko 2007-09-16
  • 打赏
  • 举报
 回复
上面的例子，在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>
willko 2007-09-16
  • 打赏
  • 举报
 回复
交换后节点的事件就丢失了。。```

哈哈，，没办法，用拼音是会经常打错字的````
willko 2007-09-16
  • 打赏
  • 举报
 回复
看看这个例子。。。
元素是用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>
hejunbin 2007-09-16
  • 打赏
  • 举报
 回复
<!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')
hejunbin 2007-09-16
  • 打赏
  • 举报
 回复
<!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>
willko 2007-09-15
  • 打赏
  • 举报
 回复
function insertEle(currEle, newEle, parent) {
if (typeof currEle.insertAdjacentElement == "function") {
currEle.insertAdjacentElement("beforeBegin", newEle);
} else {
parent.insertBefore(newEle, currEle);
}
}

hejunbin 2007-09-15
  • 打赏
  • 举报
 回复
呀，你标题写错了哈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
willko 2007-09-15
  • 打赏
  • 举报
 回复
晕，，我表达能力太差了。。。

页面分3部分，，上面的右边是相片，下面是编辑区，相片可以拉到编辑区进行排序，在编辑区的相片可以拖动和其它相片换位置。。
问题就是出在换位置这里，，在 FF下，如果相片和另一个相片换位置，那它就不能再次更换位置了。。。
我要的效果是可以无限次换位置，，但是在IE下正常，在FF下就不正常了。。。。。。

btbtd 2007-09-15
  • 打赏
  • 举报
 回复
疯, 俺不知道在说啥...
willko 2007-09-15
  • 打赏
  • 举报
 回复
第一次可以交换，，交换过一次之后就不行了。。```
willko 2007-09-15
  • 打赏
  • 举报
 回复
不是时间啊。。

是事件...````
hejunbin 2007-09-15
  • 打赏
  • 举报
 回复
不行的话把时间放在全局数组中吧，没有仔细看代码，呵呵
帮你顶了O.o
willko 2007-09-15
  • 打赏
  • 举报
 回复
顶
计算机网络知识点整理-面经
计算机网络主要由一些通用的，可编程的硬件互联而成，这些硬件并非专门用来实现某一特定目的，这些可编程的硬件能够用来传送多种不同类型的数据，并能支持广泛和日益增长的应用。
Redis（四） 高可用集群 搭建 原理 如何扩展新节点 如何删除节点 Redis集群选举原理分析 集群脑裂数据丢失问题 Redis高可用集群搭建 Java操作redis集群 springboot整合
文章目录前言一、高可用集群Redis高可用集群搭建 前言 在redis3.0以前的版本要实现集群一般是借助哨兵sentinel工具来监控master节点的状态。但是这种架构存在一些缺点。 在主从切换的瞬间存在访问瞬断的情况，等待时间比较长，至少十来秒不可用。 哨兵模式只有一个主节点对外提供服务，没法支持很高的并发 单个主节点内存也不宜设置得过大，否则会导致持久化文件过大，影响数据恢复或主从同步的效率。 一、高可用集群 高可用集群是一个由多个主从节点群组成的分布式服务器群，它具有复制、高可用和分片.
redis三种集群模式：
当一个sentinel节点与master节点的心跳丢失时，这个sentinel节点就会认为master节点出现了故障，处于不可用的状态，这种判定叫作主观下线（即sentinel节点自己主观认为master下线了）之后，这个sentinel节点会与其他sentinel节点交换信息，如果发现认为主节点发生故障的sentinel节点的个数超过了某个阈值（通常为sentinel节点总数的1/2+1，即超过半数），则sentinel会认为master节点已经处于客观下线的状态，即大家都认为master故障不可用了。
LoRa节点开发：4、代码详解 LoRaWAN节点入网
本文主要结合LoRaNode SDK v4.4.2和LoRaWAN规范1.0.3来展开。 1、入网（激活）方式 可以看出，两种入网（激活）方式： OTAA（Over-The-Air Activation）：空中激活 ABP（Activation By Personalization）：手动激活 2、空中激活 空中激活的过程，其实就是和服务器数据交换的过程，且当上行或下行消息丢失...
redis-哨兵
哨兵 Redis Sentinel是Redis的高可用实现方案，可以解决主从复制模式下可能出现的问题。 主从复制问题 主节点出现故障，需要手动将从节点晋升为主节点，修改应用方主节点地址，命令其他从节点去复制新的主节点。 主节点的写、储存能力受到单机的限制。 1主2从的Redis主从复制模式下,如master 有两个从节点，分别为slave-1,slave-2。如何手动进行故障转移: 当maste...
JavaScript

87,915

社区成员

224,619

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章