Firefoxの位置を変更した後の不要な背景

Question

あるdivから別のdivへスパンを移動したい。 私のソリューションはChromeとSafariでは問題なく動作しますが、Firefoxでは問題が発生します。スパンを移動すると不要なバックグラウンドが発生します。ページ上の他の場所をクリックするとすぐに背景が消えますが、最初に表示されないようにする必要があります。どんな助けでも大歓迎です。

var clckdEl = null; 
 
var clicked = function(evt) { 
 
    var span = null; 
 
    if (clckdEl) { 
 
    if (clckdEl !== this) { 
 
     span = clckdEl.children[0]; 
 
     clckdEl.removeChild(span); 
 
     this.appendChild(span); 
 
    } 
 
    clckdEl.classList.remove('selected'); 
 
    clckdEl = null; 
 
    } else if (this.children.length) { 
 
    clckdEl = this; 
 
    clckdEl.classList.add('selected') 
 
    } 
 
}; 
 
var els = document.getElementsByClassName('rect'), 
 
    el, 
 
    idx = 0; 
 

 
for (idx = 0; idx < els.length; idx += 1) { 
 
    el = els[idx]; 
 
    el.onclick = clicked; 
 
}

.holder { 
 
    font: 100px Arial Unicode MS, sans-serif; 
 
    width: 2em; 
 
    height: 1em; 
 
} 
 

 
.rect { 
 
    float: left; 
 
    display: flex; 
 
    width: 1em; 
 
    height: 1em; 
 
    align-items: center; 
 
} 
 

 
.rect-blue { 
 
    background-color: blue; 
 
} 
 

 
.rect-yellow { 
 
    background-color: yellow; 
 
} 
 

 
.letter { 
 
    line-height: 1em; 
 
    padding-bottom: 15%; 
 
    margin: 0 auto; 
 
} 
 

 
.selected { 
 
    background-color: red; 
 
}

<div class='holder'> 
 
    <div class='rect rect-blue'> 
 
    </div> 
 
    <div class='rect rect-yellow'> 
 
    <span class='letter'>X</span> 
 
    </div> 
 
</div>

Answer 1

必要なのは、ユーザーが選択したパラメータを無効にすることです。 は、単にあなたのホルダークラスにこのスタイルを追加します。

user-select: none; 
    -moz-user-select: none; 
    -webkit-user-select: none; 
    -ms-user-select: none; 

JSFiddle