Re: [問題] removeEventListener 失敗?

[sk1765 (鼎玉鉉)]

※ 引述《klern (灰)》之銘言：
: 大家好 目前遇到一點瓶頸 囧
: 我寫一小段要偵測在行動裝置上手勢的事件
: 但是最後的removeEventListener 似乎沒成功
: 我在remove的那個function中 加了一段 alert 發現警告視窗數目會遞增
: 例如第一次彈一個視窗 第二次就彈兩個
: 想請問我是哪裡寫錯了嗎 謝謝
: P.S. 裝置為iPad , $.shove式一個plugin傳入目前的this
: document.getElementById(“divID”).addEventListener(‘gesturestart’,
:  $.shove(this.onGestureStart, this), false);
: onGestureStart: function(e) {
:          e.preventDefault();
:         document.getElementById("divID").addEventListener('gesturechange',
:           $.shove(this.onGestureChange, this), true);
:         document.getElementById("divID").addEventListener('gestureend',
:           $.shove(this.onGestureEnd, this), true);
:         return false;
: },
: onGestureChange: function(e) {
:         e.preventDefault();
:         …
:         return false;
: },
: onGestureEnd: function(e) {
:         e.preventDefault();
:         alert('1');
:         document.getElementById("divID").removeEventListener('gestureend',
:          $.shove(this.onGestureEnd, this), true);
:         document.getElementById("divID").removeEventListener('gesturechange',
:          $.shove(this.onGestureChange, this), true);
:         document.getElementById("divID").removeEventListener('gesturestart',
:           $.shove(this.onGestureStart, this), false);
:         return false;
: }


我大概搞懂你的問題出在哪了 就是那個$.shove

addEventListener('gestureend',$.shove(this.onGestureEnd, this), true)
 之所以可以繫結上event 是因為  $.shove(this.onGestureEnd, this)
 回傳一個匿名function

function() { return this.onGestureend.apply(this,e); }   ->A
這個匿名function 繫結到了 gestureend事件
所以即使gestureend事件 不是直接執行 this.onGestureend 他仍然被跑到了

現在再來看
removeEventListener('gestureend',$.shove(this.onGestureEnd, this), true)
他也繫結到了匿名function
function() { return this.onGestureend.apply(this,e); }   ->B
但是這個匿名function 跟addEventListener的那個 完全是兩個匿名function
因為用$.shove產生了兩次  A和B是不同的

所以只要想辦法刪到同一個匿名function就行了

以下是我的解法 多設幾個變數就行了


document.getElementById(“divID”).addEventListener(‘gesturestart’,
a1 = $.shove(this.onGestureStart, this), false);

onGestureStart: function(e) {
         e.preventDefault();

        document.getElementById("divID").addEventListener('gesturechange',
          a2 = $.shove(this.onGestureChange, this), true);
        document.getElementById("divID").addEventListener('gestureend',
          a3 = $.shove(this.onGestureEnd, this), true);

        return false;
},
onGestureChange: function(e) {
        e.preventDefault();
        …
        return false;
},
onGestureEnd: function(e) {
        e.preventDefault();
        alert('1');
        document.getElementById("divID").removeEventListener('gestureend',
         a3, true);
        document.getElementById("divID").removeEventListener('gesturechange',
         a2, true);
        document.getElementById("divID").removeEventListener('gesturestart',
         a1, false);

        return false;
}


以上請參考  若不能用在研究









--
※ 發信站: 批踢踢實業坊(ptt.cc) 
◆ From: 211.74.226.117
→ klern:謝謝 似乎不太行... 我確認一下有沒有打錯的地方
→ sk1765:如果不行的話 把變數都單獨寫看看  都寫在外面
→ sk1765:a3 = $.shove(this.onGestureEnd, this) 還有a2,a1都寫在
→ sk1765:程式最上面 addEventListener 和 removeEventListener裡面
→ sk1765:只放變數 a1,a2,a3 再試看看
→ sk1765:喔 這樣也不行 變成this繫結不到 變數必須寫成實字裡面
推 klern:哈 謝謝 剛試了 目前看是可以 剛剛在回文XD