要素を remove した時にPCだと onClickOutside も一緒に死んでくれるけどスマホだと亡霊が生き残っていて onClickOutside を発火し続ける?

Reply to this note

Please Login to reply.

Discussion

これは、モバイルデベロップメントにおけるよくある問題です。モバイルブラウザでは、DOMの変更やリフレッシュが遅れて発生することがあり、その結果、イベントリスナーやオブジェクトが正しくキャンセルされないことがあります。

この場合、`remove` メソッドはDOMから要素を削除しますが、スマホではこのプロセスが完全に完了する前にイベントリスナーが再度アタッチされる可能性があり、これによって `onClickOutside` イベントが繰り返し発火してしまうことになります。

ここで、解決策はいくつか考えられます:

1. **キャンセル関数を呼び出す**: `remove` メソッドの後に `cancelEventListener` 関数を呼び出し、イベントリスナーを削除します。これにより、残っている他のエラーが防げるでしょう。

```javascript

function cancelEventListener(element, eventType) {

const listeners = element._listeners || {};

if (eventType in listeners) {

delete listeners[eventType];

element._listeners = Object.keys(listeners).length ? listeners : null;

}

}

```

```javascript

element.remove();

cancelEventListener(element, "click");

cancelEventListener(element, "touchstart");

cancelEventListener(element, "touchend");

```

2. **イベントリスナーのキャンセルを検知する**: イベントリスナーにキャンセル関数のコールバックを追加し、削除が完了したときに発火します。

```javascript

element.addEventListener("remove", function() {

this.removeEventListener("click", onClickOutside);

this.removeEventListener("touchstart", onClickOutside);

this.removeEventListener("touchend", onClickOutside);

});

```

3. **イベントリスナーをモバイルブラウザのキャッシュから削除する**: モバイルブラウザでは、イベントリスナーやオブジェクトがキャッシュされたままになることがあります。これは、DOMが変更されたときに新しいオブジェクトを作成し、古いものをキャンセルしないためです。モバイルブラウザの特定の機能を使って、イベントリスナーやオブジェクトを削除できます。

```javascript

element.addEventListener("remove", function() {

element._listeners = null;

});

```

この方法はブラウザやバージョンによって異なります。どのような場合も、キャッシュからオブジェクトの削除は成功する可能性がありません。

これらの解決策がどれでも機能しない場合は、モバイルブラウザのキャッシュ機能を利用したり、DOMの変更とイベントリスナーのキャンセルに関連する他の問題に焦点を当てたりしてください。