Shiny中如何为指定超链接分配JS点击事件，避免全页链接触发

适配动态大表格场景的最优实现方式是通过类选择器做事件委托绑定，既可以精准限制点击逻辑的触发范围，也能保证动态生成数百行内容时的运行性能，具体改造逻辑如下：

• 调整JS绑定的选择器规则：放弃原来匹配全页面a标签的写法，改为仅匹配带指定标记类的a标签。这种jQuery事件委托的写法，不需要在页面加载完成后重新绑定动态插入的内容，只要后续新增的a标签带了对应标记类，点击就会触发预设逻辑，不带标记类的链接完全不会进入判断流程，性能开销极小。
• 给需要触发追踪逻辑的链接添加对应标记类：不需要触发逻辑的链接保持默认状态即可，从根源上排除非目标的点击响应。

改造后的完整可运行代码 #

ui <- fluidPage(
    
    tags$script(HTML(
        "$(document).ready(function(){
  // 仅给带shiny-tracked-link类的a标签绑定点击逻辑
  $('body').on('click', '.shiny-tracked-link', function(evt){
    Shiny.setInputValue('clicked_text', evt.target.id);
  });
})"
    )),
    
    // 前3个需要触发逻辑的链接，加上指定标记类
    tags$a(href = "#", id = 1, class = "shiny-tracked-link", "id is 1"),
    br(),
    tags$a(href = "#", id = 2, class = "shiny-tracked-link", "id is 2"),
    br(),
    tags$a(href = "#", id = 3, class = "shiny-tracked-link", "id is 3"),
    
    // 后2个不需要触发逻辑的链接，不加标记类
    br(),
    tags$a(href = "#", id = 4, "id is 4, javascript function should be suppressed for this link"),
    br(),
    tags$a(href = "#", id = 5, "id is 5, javascript function should be suppressed for this link"),
    
    textOutput("clicked_text"),
)

server <- function(input, output) {
    
    output$clicked_text <- eventReactive(input$clicked_text, {
        input$clicked_text
    })
}

shinyApp(ui = ui, server = server)

方案适配动态表格的优势 #

• 所有不匹配类选择器的a标签点击，会在jQuery事件匹配阶段直接被过滤，不会执行额外的判断逻辑，比在回调函数中判断id归属的写法性能更好，适配数百行数据的大体积表格场景
• 动态生成表格行时，只需要在生成目标链接的代码里加上class = "shiny-tracked-link"的属性即可，不需要修改绑定的JS逻辑，也不需要针对动态生成的内容重新绑定事件
• 触发范围和核心逻辑完全解耦，后续调整需要追踪的链接范围时，只需要调整链接的类标记即可，不需要改动核心交互代码

常见误区提醒：不要用回调内判断id范围的写法实现需求，动态生成的数百行表格没有固定id列表，维护成本极高，且所有a标签的点击事件都会进入回调逻辑做判断，大页面下会产生不必要的性能损耗。

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