2

クリックされた後に要素からイベントリスナーを削除しようとしています。機能するソリューションがあるように見えますが、それは理想的ではなく、壊れたコードとは異なる動作をする理由がわかりません。

これを行うにはもっと簡単な方法があることに気づきましたが、これは私が取り組んでいるJSクラスから取得したものなので、構造の一部を保持する必要があります。

これは、正しく回答された以前の投稿に関連しています（ただし、例を展開すると機能しませんでした）-JavaScriptで無名関数呼び出しを使用してイベントリスナーを削除します。

この例では、最後に作成されたdivはリスナーを正しく削除しますが、以前のdivは削除しません（ここでフィドル-http: //jsfiddle.net/richwilliamsuk/NEmbd/）：

var ctnr = document.getElementById('ctnr');
var listener = null;

function removeDiv (d) {
    alert('testing');
    d.removeEventListener('click', listener, false);
}

function addDiv () {
    var div = document.createElement('div');
    div.innerHTML = 'test';
    ctnr.appendChild(div);
    div.addEventListener('click', (function (d) { return listener = function () { removeDiv(d); } })(div), false);
}

addDiv();
addDiv();
addDiv();

私が作業を開始したバージョンでは、すべてのリスナーを保持する配列を作成します（ここでフィドル-http: //jsfiddle.net/richwilliamsuk/3zZRj/）：

var ctnr = document.getElementById('ctnr');
var listeners = [];

function removeDiv(d) {
    alert('testing');
    d.removeEventListener('click', listeners[d.id], false);
}

function addDiv() {
    var div = document.createElement('div');
    div.innerHTML = 'test';
    ctnr.appendChild(div);
    div.id = listeners.length;
    div.addEventListener('click', (function(d) {
        return listeners[listeners.length] = function() {
            removeDiv(d);
        }
    })(div), false);
}


addDiv();
addDiv();
addDiv();

document.getElementById('btn').addEventListener('click', function() {
    alert(listeners);
}, false);​

最後の1つは正常に機能しますが、リスナー配列は必要ないはずです。心配しすぎかもしれませんが、最適な解決策を知りたいです。

4

2 に答える 2

2

そうです、remove（）関数でeventlistenerを渡すよりも、配列は必要ありません。すべてのリスナーを変数に保持するだけです。

var ctnr = document.getElementById('ctnr');

function removeDiv(d, ev) {
    alert('testing');
    d.removeEventListener('click', ev, false);
}

function addDiv() {
    var div = document.createElement('div');
    div.innerHTML = 'test';
    ctnr.appendChild(div);
    div.addEventListener('click', (function(d) {
        var myfunc;
        return myfunc = function() {
            removeDiv(d, myfunc);
        }
    })(div), false);
}


addDiv();
addDiv();
addDiv();

document.getElementById('btn').addEventListener('click', function() {
    alert(listeners);
}, false);​​

jsfiddleページを更新

于 2012-04-06T10:42:09.963 に答える
1

リスナーが等しくない場合は、すべてのリスナーを保存する必要があるため、リスナーと要素の間に関係が必要です。要素はオブジェクト（DOM：ドキュメントオブジェクトモデル）で表されるため、カスタムプロパティを追加できます（ただし、推奨されていません：DOMオブジェクトに任意のプロパティを追加できますか？）（デモ）：

var ctnr = document.getElementById('ctnr');

function removeDiv (d) {
    alert('testing');
    d.removeEventListener('click', d.custom_Listener , false);
}

function addDiv () {
    var div = document.createElement('div');
    div.innerHTML = 'test';
    div.custom_Listener = function(){removeDiv(this)};
    ctnr.appendChild(div);
    div.addEventListener('click', div.custom_Listener , false);
}

ただし、すべてのdivで同じリスナーを使用しているため、すべてのdivに個別の関数を使用せず、同じ（デモ）を使用することをお勧めします。

var ctnr = document.getElementById('ctnr');
var listener = function(){
    removeDiv(this);
};

function removeDiv (d) {
    alert('testing');
    d.style.backgroundColor = '#36f';
    d.removeEventListener('click', listener, false);
}

function addDiv () {
    var div = document.createElement('div');
    div.innerHTML = 'test';
    ctnr.appendChild(div);
    div.addEventListener('click', listener , false);
}
于 2012-04-06T09:53:10.590 に答える