問題:textareaに次のCSSがある場合、Firefoxは最初のクリックイベントを失います。
textarea:focus {
resize: vertical;
}
デモを見る:http : //jsbin.com/wuxomaneba/edit?html,css,output
これに対する解決策は簡単です- :focus
セレクターを削除します。
ただし、これが発生する理由と、これが発生する可能性のある他のcssルールまたは状況はありますか?
これはバグのように見えますが(提出してくれてありがとう!)、通常、イベントmousedown
とmouseup
イベントの両方を監視した最も深い要素にクリックイベントが送出されます。したがって、同様にtextarea を:focus
(たとえばposition:absolute; top: xxx
)に移動することで、クリックイベントを「中断」できます。これは、イベントの順序がマウスダウン->フォーカス(Webページを更新)->マウス->クリックであるためです。
このresize
プロパティは、Webページには表示されないが、ブラウザがユーザーの利益のために追加のUIを実装するために使用する「匿名コンテンツ」を制御します。私の推測では、このコンテンツへの変更はclick
イベント検出に干渉しますが、デバッグビルドでこれを確認しないと、確実に言うことは不可能です。
function logEvent(ev) {console.log(ev.type, window.getComputedStyle(document.querySelector("textarea")).resize)}
document.querySelector("textarea").addEventListener("mousedown", logEvent, false);
document.querySelector("textarea").addEventListener("focus", logEvent, false);
document.querySelector("textarea").addEventListener("mouseup", logEvent, false);
document.querySelector("textarea").addEventListener("click", logEvent, true);
textarea:focus{
position:absolute; top: 500px;
/*resize:vertical;*/
}
<textarea>click me</textarea>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加