单击图像时触发 Javascript 事件处理程序答案

【问题标题】：Fire a Javascript event handler on image click单击图像时触发 Javascript 事件处理程序
【发布时间】：2021-08-31 01:21:33
【问题描述】：

我想在 Shiny 中单击图像时触发 JS 事件处理程序。处理程序使用shiny:inputchanged（参见here）并适用于按钮。 imageOutput 可能是没有输入，那我点击后怎么创建事件呢？

library(shiny)

ui <- fluidPage(
  tags$script(HTML(
    "$(document).on('shiny:inputchanged', function(event) {  alert(event.name);})"
  )),
  titlePanel("Click on image or button"),
  fluidPage(
    mainPanel(
      actionButton("doit", "Click to check"), # Works!
      imageOutput("myimage", click = "image_click") # No response on click
    )
  )
)

server <- function(input, output, session) {
  output$myimage <- renderImage({
    list(src = system.file("help/figures/logo.png", package = "shiny"),
         width = 800, height = 800) 
  },
  deleteFile = FALSE
  )
}

shinyApp(ui = ui, server = server)

【问题讨论】：

标签： javascript r events shiny

【解决方案1】：

您可以使用shinyjs 包中的onclick() function：

library(shiny)
library(shinyjs)

ui <- fluidPage(
  tags$script(HTML(
    "$(document).on('shiny:inputchanged', function(event) {  alert(event.name);})"
  )),
  titlePanel("Click on image or button"),
  fluidPage(
    mainPanel(
      useShinyjs(),
      actionButton("doit", "Click to check"), # Works!
      imageOutput("myimage")
    )
  )
)

server <- function(input, output, session) {
  onclick("myimage", function(event) { alert(event) })
  output$myimage <- renderImage({
    list(src = system.file("help/figures/logo.png", package = "shiny"),
         width = 800, height = 800) 
  },
  deleteFile = FALSE
  )
}

shinyApp(ui = ui, server = server)

【讨论】：