如何移除shinydashboardPlus中flipBox的默认点击翻转触发器

flipBox 组件默认会给整个卡片容器绑定点击翻转事件，要实现仅按钮触发翻转的效果，不需要修改原有业务逻辑，只需要补充自定义样式和脚本屏蔽默认行为即可：

• 添加CSS样式覆盖默认的手型鼠标指针，避免误导用户认为卡片可点击
• 添加初始化脚本，解绑flipBox容器绑定的默认点击翻转事件，同时不影响卡片内部DT表格、绘图等元素的正常交互

完整修改后可运行代码 #

library(shiny)
library(shinydashboard)
library(shinydashboardPlus)

shinyApp(
  ui = dashboardPage(
    dashboardHeader(),
    dashboardSidebar(),
    dashboardBody(
      # 自定义样式和脚本，禁用flipBox默认点击翻转
      tags$style(HTML("
        .flip-box {
          cursor: default !important;
        }
      ")),
      tags$script(HTML("
        $(document).on('shiny:connected', function() {
          // 解绑组件默认绑定的点击翻转事件
          $('.flip-box').off('click');
          // 阻止卡片区域点击冒泡触发翻转，不影响内部元素交互
          $('.flip-box').on('click', function(e) {
            e.stopPropagation();
          });
        });
      ")),
      
      actionButton("swich_id", "click to swich"), # 保留原有按钮触发逻辑
      flipBox(
        id = "id1",
        front = div(
          class = "text-center",
          height = "300px",
          width = "100%",
          h1("A"), 
          p("a table"),
          DT::DTOutput('mytable')
        ),
        back = div(
          class = "text-center",
          height = "300px",
          width = "100%",
          h1("B"),
          p("a graphe"),
          plotOutput("graph")
        )
      )
    )
  ),
  
  server = function(input, output, session) {
    output$mytable <- DT::renderDT({
      cars[1:5, 1:2]
    })
    
    output$graph <- renderPlot({
      plot(cars$speed, cars$dist)
    })
    
    # 原有按钮触发翻转逻辑无需修改
    observeEvent(input$swich_id, {
      updateFlipBox("id1")
    })
  }
)

效果说明 #

脚本会在Shiny应用加载完成后自动执行，仅移除flipBox最外层容器的翻转触发绑定：

• 点击卡片任意空白区域都不会再触发翻转
• 卡片内部的表格筛选、分页，绘图交互等操作完全不受影响
• 原有自定义按钮的翻转触发逻辑可以正常工作

内容的提问来源于stack exchange，提问作者PrettyClose