MozTW 討論區

各項 Mozilla 相關軟體與技術討論
現在的時間是 2025-06-18, 05:09

所有顯示的時間為 UTC + 8 小時





發表新文章 回覆主題  [ 19 篇文章 ]  前往頁數 12  下一頁
發表人 內容
文章發表於 : 2007-03-14, 20:09 
離線
頭像

註冊時間: 2006-10-28, 15:41
文章: 1421
來自: マカオ
首先, 有這樣的兩個按鈕:
代碼:
<hbox>
    <button id="a" label="按鈕A"/>
    <button id="b" label="按鈕B"/>
</hbox>

然後用這個 function 為它們加入 click 事件:
代碼:
add: function() {
    document.getElementById("a").addEventListener("click", function() {
        this.setAttribute("label", this.getAttribute("label") + "1");
    }, false);

    document.getElementById("b").addEventListener("click", function() {
        var button = document.getElementById("a");
        button.parentNode.appendChild(button);
    }, false);
}

再試試按一下 A, 它的 label 能成功地不停加入 1 字
最後按一下 B, A 也能成功地放到 B 後面
但再按 A 的時候, 它的 click 事件就失效了 :shock:

請問大家, 應該如何解決這個問題呢 :?:
感謝 :)

_________________
圖檔 挑選‧儲存圖片 圖檔 History Submenus Ⅱ 圖檔 Personal Menu
圖檔 Page Title in URL Bar 圖檔 Double Click Top-Left to Close


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-03-14, 21:04 
B 加入 A 後,
就有兩個 id 為 'a' 的 button,
你想會有什麼事發生?


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.2) Gecko/20070219 Firefox/99.0
  
引用回覆  
 文章主題 :
文章發表於 : 2007-03-15, 13:24 
離線
頭像

註冊時間: 2006-10-28, 15:41
文章: 1421
來自: マカオ
Anonymous 寫:
B 加入 A 後,
就有兩個 id 為 'a' 的 button,
你想會有什麼事發生?
甚麼 B 加入 A ????
哪裏會出現兩個 A????? :shock:
代碼:
button.parentNode.appendChild(button);

這一段是把 A 從 hbox 中移除, 再放進 hbox 裏做為 lastChild
會有甚麼事發生呢???

_________________
圖檔 挑選‧儲存圖片 圖檔 History Submenus Ⅱ 圖檔 Personal Menu
圖檔 Page Title in URL Bar 圖檔 Double Click Top-Left to Close


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-03-15, 13:55 
離線
頭像

註冊時間: 2006-10-27, 07:29
文章: 1068
Merci chao 寫:
Anonymous 寫:
B 加入 A 後,
就有兩個 id 為 'a' 的 button,
你想會有什麼事發生?
甚麼 B 加入 A ????
哪裏會出現兩個 A????? :shock:
代碼:
button.parentNode.appendChild(button);

這一段是把 A 從 hbox 中移除, 再放進 hbox 裏做為 lastChild
會有甚麼事發生呢???


不是吧....
你那個動作只是在A的父節點底下新增一個名為A的html element
所以會變成有兩個一模一樣的元素
應該是先用removeChild()再用insertBefore()

吧?


回頂端
Opera/9.10 (Windows NT 5.1; U; ja)
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-03-15, 14:02 
離線
[網站管理員]
頭像

註冊時間: 2004-09-27, 09:24
文章: 1685
應該先 removeChild() 再插入元素。元素不會因為從 DOM 移除掉了以後就消失,只要你的變數裡有元素,還可以重新插入到其他地方。
當然更保險的做法是 .cloneNode(true),複製一份元素。

_________________
korp + korp 中文站(沒精神更新)


回頂端
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-03-15, 18:14 
離線
頭像

註冊時間: 2006-10-28, 15:41
文章: 1421
來自: マカオ
legnaleurc 寫:
不是吧....
你那個動作只是在A的父節點底下新增一個名為A的html element
所以會變成有兩個一模一樣的元素
應該是先用removeChild()再用insertBefore()

吧?
這個....我當然是有試過才問的....= ="
更何況 appendChild 的用法我可是很清楚的喔 :arrow:
DOM:element.appendChild
引言回覆:
If child is a reference to an existing node in the document, appendChild moves it from its current position to the new position (i.e. there is no requirement to remove the node from its parent node before appending it some other node).

This also means that a node can't be in two points of the document simultaneously. So if the node already has a parent, it is first removed, then appended at the new position.

所以先用 removeChild 再用 appendChild 是多餘的 :idea:

_________________
圖檔 挑選‧儲存圖片 圖檔 History Submenus Ⅱ 圖檔 Personal Menu
圖檔 Page Title in URL Bar 圖檔 Double Click Top-Left to Close


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-03-15, 18:22 
離線
頭像

註冊時間: 2006-10-28, 15:41
文章: 1421
來自: マカオ
不相信的話可以用 Firefox 來試試

userChrome.js:
代碼:
document.getElementById("reload-button").addEventListener("click", function() {
    this.parentNode.insertBefore(this.cloneNode(true), this.nextSibling); //複製一個重新載入到自己的右邊
    this.nextSibling.id="home-button"; //顯示成首頁, 以作分辨
}, false);

document.getElementById("stop-button").addEventListener("click", function() {
    var button=document.getElementById("reload-button"); //找重新載入
    button.parentNode.removeChild(button); //先移除
    this.parentNode.appendChild(button); //放到 parentNode 的最後面
}, false);

_________________
圖檔 挑選‧儲存圖片 圖檔 History Submenus Ⅱ 圖檔 Personal Menu
圖檔 Page Title in URL Bar 圖檔 Double Click Top-Left to Close


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-03-15, 20:47 
離線
頭像

註冊時間: 2005-02-24, 19:15
文章: 1037
來自: Taiwan
Merci chao 寫:
首先, 有這樣的兩個按鈕:
代碼:
<hbox>
<button id="a" label="按鈕A"/>
<button id="b" label="按鈕B"/>
</hbox>

然後用這個 function 為它們加入 click 事件:
代碼:
add: function() {
document.getElementById("a").addEventListener("click", function() {
this.setAttribute("label", this.getAttribute("label") + "1");
}, false);

document.getElementById("b").addEventListener("click", function() {
var button = document.getElementById("a");
button.parentNode.appendChild(button);
}, false);
}

再試試按一下 A, 它的 label 能成功地不停加入 1 字
最後按一下 B, A 也能成功地放到 B 後面
但再按 A 的時候, 它的 click 事件就失效了 Shocked

請問大家, 應該如何解決這個問題呢 Question
感謝 Smile
legnaleurc 寫:
不是吧....
你那個動作只是在A的父節點底下新增一個名為A的html element
所以會變成有兩個一模一樣的元素
應該是先用removeChild()再用insertBefore()

吧?
這個....我當然是有試過才問的....= ="
更何況 appendChild 的用法我可是很清楚的喔 :arrow:
DOM:element.appendChild
引言回覆:
If child is a reference to an existing node in the document, appendChild moves it from its current position to the new position (i.e. there is no requirement to remove the node from its parent node before appending it some other node).

This also means that a node can't be in two points of the document simultaneously. So if the node already has a parent, it is first removed, then appended at the new position.

所以先用 removeChild 再用 appendChild 是多餘的 :idea:

如你所述, 它不該發生問題. 那你為什麼發問?

_________________
Amauds's Firefox
曾經妳以為最可靠的依賴;其實從未曾真實的存在過。
圖檔圖檔


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-03-15, 21:00 
離線
頭像

註冊時間: 2006-10-28, 15:41
文章: 1421
來自: マカオ
Amauds 寫:
如你所述, 它不該發生問題. 那你為什麼發問?
Oh, my God... 還在研究 appendChild 嗎... = ="
appendChild 當然沒問題...

我的問題是: 用了 appendChild, insertBefore 或者 replaceChild 之後, 用 addEventListener 新增的 event 似乎會失蹤

而我以上列出的所有 code 都能顯示出這現像
所以想請教大家, 應該如何解決這問題?


為何總是被人看成是專問低能問題的呢.... :cry:

_________________
圖檔 挑選‧儲存圖片 圖檔 History Submenus Ⅱ 圖檔 Personal Menu
圖檔 Page Title in URL Bar 圖檔 Double Click Top-Left to Close


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-03-16, 13:17 
離線
[網站管理員]
頭像

註冊時間: 2004-09-27, 09:24
文章: 1685
Merci chao 寫:
Amauds 寫:
如你所述, 它不該發生問題. 那你為什麼發問?
Oh, my God... 還在研究 appendChild 嗎... = ="
appendChild 當然沒問題...

我的問題是: 用了 appendChild, insertBefore 或者 replaceChild 之後, 用 addEventListener 新增的 event 似乎會失蹤

而我以上列出的所有 code 都能顯示出這現像
所以想請教大家, 應該如何解決這問題?


為何總是被人看成是專問低能問題的呢.... :cry:

喔喔,失蹤應該是正常的,所以要重新 addEventListener 一次。
.cloneNode(true) 試試看「或許」可以。

_________________
korp + korp 中文站(沒精神更新)


回頂端
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-03-16, 22:09 
離線
頭像

註冊時間: 2006-10-28, 15:41
文章: 1421
來自: マカオ
kourge 寫:
喔喔,失蹤應該是正常的,所以要重新 addEventListener 一次。
.cloneNode(true) 試試看「或許」可以。
喔, 謝謝你的答案 :)
不過.... 不知道大家還有沒有其他的方法呢 :?:

_________________
圖檔 挑選‧儲存圖片 圖檔 History Submenus Ⅱ 圖檔 Personal Menu
圖檔 Page Title in URL Bar 圖檔 Double Click Top-Left to Close


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-03-18, 00:49 
離線
[網站管理員]
頭像

註冊時間: 2004-09-27, 09:24
文章: 1685
Merci chao 寫:
kourge 寫:
喔喔,失蹤應該是正常的,所以要重新 addEventListener 一次。
.cloneNode(true) 試試看「或許」可以。
喔, 謝謝你的答案 :)
不過.... 不知道大家還有沒有其他的方法呢 :?:

.cloneNode 提醒:
.cloneNode(true) 會 deep clone,子元素會一起複製
.cloneNode(false) 只會複製該元素,子元素不會一起複製。

_________________
korp + korp 中文站(沒精神更新)


回頂端
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-03-18, 08:10 
離線
頭像

註冊時間: 2006-10-28, 15:41
文章: 1421
來自: マカオ
kourge 寫:
.cloneNode 提醒
但是 cloneNode 不會把 event 也一併複製的喔.... :oops:
就像前面 reload-button 和 stop-button 的例子一樣
按下新增了 event 的 reload-button 之後, 會製造一個 cloneNode 出來
不論 cloneNode 有沒有被更改 id, 按下這個複製品之後不會再進行複製
這證明 cloneNode 只複製 element 而不複製 event

我明白可以再次用 addEventListener 新增回來, 但如果 removeChild 這類動作不是我做的, 那我就需要別的 code 去監視這類動作了...

Gecko 好像做得不夠完善的樣子...

_________________
圖檔 挑選‧儲存圖片 圖檔 History Submenus Ⅱ 圖檔 Personal Menu
圖檔 Page Title in URL Bar 圖檔 Double Click Top-Left to Close


回頂端
Mozilla/5.0 (Windows; U; Win 9x 4.90; zh-TW; rv:1.8.1.2) Gecko/20070219 Firefox/2.0.0.2
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-04-30, 20:52 
離線
頭像

註冊時間: 2006-10-28, 15:41
文章: 1421
來自: マカオ
剛才發現, 這個問題在 3.0a5 中解決了, 請各位套件開發者注意 :idea:

_________________
圖檔 挑選‧儲存圖片 圖檔 History Submenus Ⅱ 圖檔 Personal Menu
圖檔 Page Title in URL Bar 圖檔 Double Click Top-Left to Close


回頂端
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-TW; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
 個人資料  
引用回覆  
 文章主題 :
文章發表於 : 2007-05-02, 14:11 
離線
[網站管理員]
頭像

註冊時間: 2004-09-27, 09:24
文章: 1685
Merci chao 寫:
剛才發現, 這個問題在 3.0a5 中解決了, 請各位套件開發者注意 :idea:

喔,好棒!
對了,Gecko 1.9 會開始要求 developer 使用 importNode() 或 adaptNode() 喔。

_________________
korp + korp 中文站(沒精神更新)


回頂端
Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3
 個人資料  
引用回覆  
顯示文章 :  排序  
發表新文章 回覆主題  [ 19 篇文章 ]  前往頁數 12  下一頁

所有顯示的時間為 UTC + 8 小時


誰在線上

正在瀏覽這個版面的使用者:沒有註冊會員 和 46 位訪客


不能 在這個版面發表主題
不能 在這個版面回覆主題
不能 在這個版面編輯您的文章
不能 在這個版面刪除您的文章
不能 在這個版面上傳附加檔案

搜尋:
前往 :  
Powered by phpBB® Forum Software © phpBB Group
正體中文語系由 竹貓星球 維護製作
© moztw.org, Mozilla Foundation
MozTW,Mozilla 台灣社群