Shiny中Plotly图表小屏幕下点击事件失效的解决办法

问题根源 #

1. 事件注册与监听不匹配：你的代码注册了plotly_selecting事件，但实际监听的是plotly_click，这会导致事件无法正确捕获，该问题和屏幕大小无关。
2. 小屏幕触摸交互冲突：在移动设备或小屏幕上，浏览器默认的触摸滚动手势会和Plotly的dragmode = "select"行为冲突，导致点击/选择事件被拦截。

解决方案 #

1. 统一事件注册与监听

确保注册的事件和监听的事件名称完全一致：

• 若要监听单点点击：注册plotly_click，同时用event_data("plotly_click")获取事件数据。
• 若要监听框选区域：注册plotly_selecting，同时用event_data("plotly_selecting")获取事件数据。

2. 配置触摸交互参数

通过plotly::config()调整触摸行为，避免和浏览器默认手势冲突：

• scrollZoom = FALSE：禁用Plotly的滚动缩放功能，防止触摸滚动被拦截。
• touchMode = "select"：明确设置触摸设备上的交互模式为选择，优先响应点击/框选事件。
• doubleClickDelay：调整双击延迟阈值，减少移动设备上的误触。

修正后的完整代码 #

library(shiny)
library(plotly)

ui <- fluidPage(
  plotlyOutput("plot"),
  verbatimTextOutput("click")
)

server <- function(input, output, session) {
  
  nms <- row.names(mtcars)
  
  output$plot <- renderPlotly({
    plot_ly(mtcars, x = ~mpg, y = ~wt, customdata = nms) %>%
      layout(dragmode = "select") %>%
      # 注册与监听一致的事件（这里以点击事件为例）
      event_register("plotly_click") %>%
      # 配置触摸交互，适配小屏幕
      config(
        scrollZoom = FALSE,
        touchMode = "select",
        doubleClickDelay = 300
      )
  })
  
  output$click <- renderPrint({
    d <- event_data("plotly_click")
    if (is.null(d)) "点击事件会显示在这里（双击清空）" else d
  })
}

shinyApp(ui, server)

额外说明 #

如果需要框选功能，只需将代码中的plotly_click替换为plotly_selecting即可，其他配置保持不变。发布到shinyapps.io后，移动设备上的触摸事件就能正常触发。

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