Question

我有一个带有Rails的网络应用程序。我使用jQuery来操作文本选择。

我已经实施了两个修改：

阅读模式： 用户只能阅读文字。隐藏了亮点和修改。

评论模式： 用户可以编辑和修改文本。

对于阅读模式，我想阻止所有文本修改功能被触发。

现在我有一个变量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块中实现“读取模式函数”？

我希望你理解我的问题。谢谢你的帮助！

Answer 1

我认为有一些事情可以解决这个问题：

使用stopImmediatePropagation取消对兄弟事件处理程序的通知。
为您要取消的所有“编辑”事件使用一个事件处理程序。

换句话说，就像这样：

$ ->
    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。

此策略假定您在每个事件的审阅模式下要执行的操作都是停止事件发生。如果你需要根据事件做不同的事情，那么这也不会有效 - 但你可以用不同的事件处理程序做类似的事情。

如何在jQuery中使用不同的函数在两种不同模式之间正确切换？

1 个答案: