0

誰かが以前にこれに遭遇したことがあるのか​​、それとも私のコードの何が問題なのか教えてくれるのだろうかと思っていました。

mouseenterで、テキストを広げて変更するボタンがあります。マウスを離れると、元の状態に戻ります。

ここにjsfiddleを設定しました。これは関連するコードです（省略形）：

var labelChanger = function (off, on) {
  $el.off('mouseenter').off('mouseleave');
  $el.mouseenter(function (e) {
      e.stopPropagation();
      changeContent(on);
      $(this).animate({'width': '70%'}, 50);
  }).mouseleave(function (e) {
      e.stopPropagation();
      changeContent(off);
      $(this).animate({'width': '50%'}, 50);
  });
};

正常に動作しますが、マウスを上または下からボックスに入れると、マウスを動かすとmouseenterイベントがトリガーされる状態になるという奇妙なことが起こります（これは約25％の確率で発生します）。 ）要素「ちらつき」によって発火しているのがわかります。その下にある種のログを追加しました。

ただし、マウスを横から入れると安定し、期待通りに動作します。

なぜこれなのか誰か知っていますか？私は困惑しています。

4

2 に答える 2

1

スパンの内容を変更すると、サイズの変更（テキストの長さの変更による）により、マウスがスパンをすばやく「離れ」、「再入力」します。マウスの開始/終了イベントがスパンからラッパーにバブリングし、スクリプトをトリガーして再度変更し、チェーン全体を開始します。

于 2013-02-14T21:44:00.563 に答える
1

を使用するoff()場合は、も使用する必要がありますon()。mouseenterの問題は、イベントがバブルすることです。新しいコンテンツを挿入すると、その新しいコンテンツのmouseenterがバブルし、新しいイベントがトリガーされます。次のようなものを試してください。

var labelChanger = function (off, on) {
    $el.off('mouseenter').off('mouseleave');
    $el.on({
        mouseenter: function (e) {
            if (e.target == this) {
                changeContent(on);
                $(this).animate({'width': '70%'}, 50);
            }
        },
        mouseleave(function (e) {
            changeContent(off);
            $(this).animate({'width': '50%'}, 50);
        }
    });
};

フィドル

于 2013-02-14T21:58:22.940 に答える