javascript - ユーザーがテーブルをマウスアウトした場合、ボタンを削除するにはどうすればよいですか？

Question

私が今持っているものはほとんど良いですが、テーブルの行に沿ってマウスを動かすと、何らかの理由でボタンが削除されます。これは望ましくありません。テーブル全体をマウスアウトした場合に削除するボタンのみです。

HTML：3列12行+3列の古いテーブルのように見え<thead>ます。

JS：

$(document).ready(function(){
    $('#editData tr').hover(function(){
        $('button').remove();
        $(this).children('td:last-child').append('<button id="editButton">Edit</button>');
    });
    $('#editData').mouseout(function(){
        $('button').remove();
    });
});

CSS：

#editData {
  width: 500px;
  margin: auto;
  background: #dadce1;
  margin-bottom: 50px;
  box-shadow: 0 0 10px 1px #e1e1e1;
}
#editData tbody {
  border: 1px solid #b8b8b8;
  border-top: 0;
}
#editData thead {
  border: 1px solid #b8b8b8;
  border-bottom: 0;
  background: rgba(255,255,255,0.7);
  font-size: 20px;
}
#editData thead th {
  padding: 10px;
  font-weight: bold;
  text-align: center;
}
#editData th:last-child, #editData tr td:last-child {
  width: 40px;
}
#editData tr {
  text-align: center;
  height: 30px;
}
#editData td {
  padding: 3px;
}
#editData tr:nth-child(even) {
  background: rgba(255,255,255,0.7);
}
#editButton {
  width: 40px;
  height: 24px;
  border-radius: 5px;
  padding: 0;
}

score 5 · Accepted Answer

DOMの準備ができたら、すべてのボタンを追加することをお勧めします。

$(function() {
  $('#editData tr td:last-child').append('<button class="editButton">Edit</button>');
});

次に、CSSを使用してボタンを表示/非表示にします。

.editButton {
  width: 40px;
  height: 24px;
  border-radius: 5px;
  padding: 0;
  display: none;
}

#editData tr:hover .editButton {
  display: block;
}

また、ボタンがになっていることにも注意してください.editButton。

これが実際の動作です：http：//jsfiddle.net/23b99/15/

score 2 · Accepted Answer

2 番目のパラメーターを使用します.hover。mouseleaveこれにより、ハンドラーが行にアタッチされます ( tr)。

$('#editData tr').hover(function(){
    $(this).children('td:last-child').append('<button id="editButton">Edit</button>');
}, function() {
    $('button').remove();
});

フィドル

基本的に、行のあなたmouseenterとmouseleaveハンドラーのバランスをとっただけです。

また、実際の問題を知りたい場合は、mouseoutvsmouseleave (ページの下部にあるデモ) についてお読みください。

問題は、mouseoutバブルアップするため、テーブルの子孫で起動するたびに、テーブル要素にバブルアップし、そのマウスアウトハンドラーをトリガーすることです。

mouseoutドキュメントから：

このイベントタイプは、イベントバブリングが原因で多くの問題を引き起こす可能性があります。たとえば、この例では、マウスポインターが Inner 要素の外に移動するmouseoutと、そこにイベントが送信され、その後 Outer まで細流します。mouseoutこれにより、不適切なタイミングでバインドされたハンドラーがトリガーされる可能性があります。.mouseleave()便利な代替手段については、の説明を参照してください。

hoverは、アタッチmouseenterしてハンドラーを簡略化したものにすぎません。元の例の代わりにmouseleave明示的に使用することもできます。同様に機能します。mouseleavemouseout

$('#editData tr').mouseenter(function(){
    $('button').remove();
    $(this).children('td:last-child').append('<button id="editButton">Edit</button>');
});
$('#editData').mouseleave(function(){
    $('button').remove();
});

フィドル

この 2 番目のコードは、あなたが求めたものです。mouseleaveテーブルのときにすべてのボタンmouseenterを削除しますmouseleave。どちらも同じ目に見える効果があります。

補足:単一の引数で呼び出された場合にハンドラーをとイベントの両方に不必要にアタッチするため、例のhoverbyを置き換えました。mouseenter.hovermouseentermouseleave

の.hover場合、mouseleavefor はtrボタンを削除して新しいボタンを作成し、マウスをテーブルの外に移動すると、作成したばかりのボタンを削除するテーブル要素までイベントがバブルアップします。または、マウスを別のボタンに移動すると、ハンドラーは、(mouseleave古い行とmouseenter新しいホバーターゲット行の) 2 回も呼び出されます。もちろん、これらのハンドラーはマイクロ秒単位で実行され、ブラウザーが再描画をグループ化する可能性があるため、これは表示されません。このfiddleconsole.logの一部の s で実際に起こっていることがわかります。

これは、このユースケースでは大きな違いをもたらさない可能性があります (パフォーマンスを除く) が、他の多くのケースでは問題が発生する可能性があります。SO に関する多くの質問は.hover()、単一の引数で呼び出されmouseenterた場合、そうでないハンドラーのみがアタッチされると質問者が考えたためです。 .

ps。イベントのバブリング/ロジックの問題にこの回答を向けましたが、そのような単純なことでjQueryを悪用する必要はありません。@Daryl Ginn の答えは、実世界での使用に非常に適したソリューションです。=]

score 0 · Accepted Answer

私はあなたがこれを探していると思います: http://jsfiddle.net/23b99/13/

    $(document).ready(function () {
       $('#editData tr').hover(function () {
         $('button').remove();
         $(this).children('td:last-child').append('<button id="editButton">Edit</button>');
       }, function () {
         $('button').remove();
       });
    });

score 0 · Accepted Answer

問題は、マウスが「td」を離れたときにマウスアウトが発生することですが、「tr」にあったため、ホバーは再び発生しませんでした。代わりに「td」でホバーを実行すると、マウスで水平方向に移動して列の境界を越えると、新しいホバーが開始されます。

この変更を試してください。tr -> td を追加し、.parent() を追加します

$(document).ready(function(){
    $('#editData td').hover(function(){
        $('button').remove();
        $(this).parent().children('td:last-child').append('<button id="editButton">Edit</button>');
    });
    $('#editData').mouseout(function(){
        $('button').remove();
    });
});

新しいフィドル

score 0 · Accepted Answer

0

に置き換えるだけhoverでmouseover機能します。

于 2013-02-15T18:22:11.927 に答える

javascript - ユーザーがテーブルをマウスアウトした場合、ボタンを削除するにはどうすればよいですか？

5 に答える 5

Related

Reference