1

Rails を使用した Web アプリがあります。テキスト選択の操作には jQuery を使用します。

私は2つのモディを実装しました:

読み取りモード: ユーザーはテキストのみを読み取ることができます。ハイライトと変更は非表示になります。

レビュー モード: ユーザーはテキストを編集および変更できます。

読み取りモードでは、テキスト変更のすべての機能がトリガーされないようにしたいと考えています。

今のところ、変数がありますinReviewMode。そのブール値と私は、ユーザーがボタンをクリックしたときに値をトリガーします。コードでは、次のようなスイッチを実現しています。

(CoffeeScript表記)

jQuery ->
  $(document).on 'contextmenu', 'article#content', (e) ->
    if inReviewMode
      e.preventDefault()
      # and so on... 

  $(document).on 'click', 'article#content', (e) ->
    if inReviewMode
      # something to do

if ステートメントをすべての関数にラップしてから、else ブロックに「読み取りモード関数」を実装するなどのより良いアプローチはありますか?

私の質問を理解していただければ幸いです。助けてくれてありがとう！

4

1 に答える 1

2

これをきれいにすることができるいくつかのことがあると思います：

  1. stopImmediatePropagation兄弟イベント ハンドラへの通知をキャンセルするために使用します。
  2. キャンセルしたいすべての「編集」イベントに対して 1 つのイベント ハンドラを使用します。

つまり、次のようなものです。

$ ->
    isReviewMode = false;

    $('#review-yes').change () ->
        isReviewMode = this.checked;

    $(document).on 'click contextmenu', '#content', (e) ->
        if isReviewMode
            e.preventDefault()
            e.stopImmediatePropagation()

    $(document).on 'click', '#content', (e) ->
        alert 'edit mode!'

例: http://jsfiddle.net/6zAN7/8/

例からわかるように、レビュー モードではclickとcontextmenuは発生しません。

アイデアを拡張してEditModeEvents、編集モードでキャンセルするすべてのイベントを含む定数変数を提供できます。

$ ->
    isReviewMode = false;
    EditModeEvents = ['click', 'contextmenu'];

    $('#review-yes').change () ->
        isReviewMode = this.checked;

    $(document).on EditModeEvents.join(' '), '#content', (e) ->
        if isReviewMode
            e.preventDefault()
            e.stopImmediatePropagation()

    $(document).on 'click', '#content', (e) ->
            alert 'edit mode!'

このようにすると、コードが何を達成しているかが少し明確になり、新しいイベントを追加するために必要なことは、イベント名を に追加することだけEditModeEventsです。

この戦略は、各イベントのレビュー モードで行う必要があるのは、イベントの発生を停止することだけであることを前提としています。イベントに応じて異なることを行う必要がある場合、これはうまく機能しませんが、個別のイベント ハンドラーを使用して同様のことを行うことができます。

于 2013-02-17T15:56:22.990 に答える