のFirefox：マウスボタンがここ

Question

を押している間、マウスオーバーが動作しませんが、私が作るしようとしているものです： https://gfycat.com/ValidEmbarrassedHochstettersfrog

私は、マウスを使用して<table>に<td>オブジェクトの一部を強調したいです。この動画はChromeで記録され、完全に動作します。残念ながら、それはFirefoxではありません。

1. ユーザーがテーブル内の最初のセルをクリック
2. 彼は
3. 細胞が

コード強調表示されている他のセルにマウスをドラッグ：

をここではどのように動作

です

$("#productList").on("mousedown", "td", function() { 
    //save from where to start 
} 

$("#productList").on("mouseover mouseenter mouseover hover", "td", function() { 
    //update highlighting, modify classes 
    //this function isn't fired when I click on one of <td> and drag mouse somewhere else 
} 

ここで、#productListは<table>です。

Chromeではすべて正常に動作しますが、firefoxはmouseenterイベント（と私が試みたもの）を起動しないようです。マウスオーバーは、クリックしたオブジェクトに対してのみ機能します。マウスを使ってドラッグすると、Firefoxはフォーカスされたオブジェクトだけを考慮しているようです。

どうすれば迂回できますか？

EDIT： 言及する重要なことは1つです：私は各セルに<input>を持っています。これにより問題が発生する可能性があります https://jsfiddle.net/q8v7f6uv/6/

Answer 1

使用しているFirefoxのバージョンは何ですか？あなたが説明したことを簡単に複製しようとしましたが、それはFF（47.0.1）とChromeで動作するようです。それはで動作していない

、あなたの質問に編集を行った後..：

$(this).css("background", "yellow"); 

https://jsfiddle.net/q8v7f6uv/1/

EDIT：MouseEnterイベントで

$(this).css("background", "red"); 

：マウスダウンオン

Firefoxはテキストボックスがブラウザ内で「ドラッグ」されているため、できることのようにテキストを強調表示し、別のテキストフィールドにドラッグアンドドロップします。

あなたの問題を解決するCSS：user-drag: none;とuser-select: none;でこの機能を無効にすることができます。 inputのために追加した追加のCSSルールに注目してください。 https://jsfiddle.net/q8v7f6uv/10/

Answer 2

ありがとうございました。それはjsfiddleで動作するようです。マウスの左ボタンが押されたとき、mouseenterイベントがFFでトリガされない状況があります。

例とコードの間に明らかな違いはありません。