私は LI の UL を持っており、それぞれに IMG と短いテキストを含む SPAN が含まれており、誰かが IMG の上にマウスを置いた場合に SPAN を表示することを意図した私のコードは、TEXT ノードのみを探して見つけています。
ある時点までのコードは次のとおりです。
drag.mousemove = function (event) {
if (event == null) {
event = window.event;
}
var lowest_distance = +Infinity;
var lowest_distance_index = null;
var root = document.getElementById('path1');
if (!root) {
return;
}
var intermediate = root.childNodes;
var images = [];
var best_image = null;
for (var outer = 0; outer < intermediate.length; ++outer) {
console.log('Outer: ' + intermediate[outer].nodeName);
}
}
そして、それが報告する唯一のものは「Outer: #text」です。path1 DIV には、ドラッグされた画像が含まれます。ブラウザの動作の観点からは、画像が正常にドラッグ アンド ドロップされ、途中で SPAN が失われたように見えます。しかし、コンソールはパス 1 の子ノードの内側のループには乗りません。私が引用したのは、"Inner:" が記録された childNodes から外部の childNode へのトラバーサルです。ログに "Inner: " が記録されたことは覚えていません。ノードの内容をログに記録したところ、それらはすべて改行と 8 つのスペースであり、タブはありませんでした。
また、HTML ソースでは、path1 の開始 DIV タグと終了 DIV タグの間のコンテンツ全体が改行と 8 つのスペースであり、タブはありません。
画像に対して機能し、(この場合) 含まれている LI をターゲット領域に移動することを目的としたドラッグ アンド ドロップを行う賢明な方法はありますが、DOM インスペクションはテキスト ノードのみを検出しますか? あるいは、最初の DOM コンテンツを認識される唯一のものとしてフリーズする理由はありますか?