-3

テーブルの行がクリック可能であることを実装したいと考えています。data-hrefCSS でホバー時のカーソルを変更し、属性で指定されたリンクに移動するテーブル行にクリック イベントを実装することで、これを実装しました。

問題は、AJAX 要求をトリガーするテーブル行内にいくつかのボタンがあることです。したがって、これらのボタンをクリックすると、親行のクリック イベントが防止されます。

これは私の現在の実装です（CoffeeScriptで）：

jQuery.fn.preventClick     = -> $(@).data("disabled", true)
jQuery.fn.isClickPrevented = -> $(@).data("disabled")
jQuery.fn.enableClick      = -> $(@).removeData("disabled")

$("#table tr").click ->
  window.location = $(@).data("href") unless $(@).isClickPrevented()
  $(@).enableClick()

$("#table tr").on "click", "[data-remote='true']", ->
  $(@).closest("tr").preventClick()

私は、親のクリックイベントの前に子のクリックイベントがトリガーされるという事実に依存しています。

私にとって、これはあまりにも複雑に見えます。これを実装するよりエレガントな方法はありますか?

4

1 に答える 1

2

イベント ハンドラー内で、イベントが先祖にバブリングするのを防ぐことができます。

e.stopPropagation();

e(イベント ハンドラー関数の最初の引数として受け入れる必要があります。)

と の両方を実行return falseするイベント ハンドラーから実行することもできます。stopPropagationpreventDefault

于 2013-06-19T10:57:29.787 に答える