R Shiny DataTable如何防止包含超链接的列中的行选择/取消选择

Posted 2023-02-22

【中文标题】R Shiny DataTable如何防止包含超链接的列中的行选择/取消选择

【英文标题】：R Shiny DataTable How to prevent row selection/deselection in columns containing hyperlinks

【发布时间】：2018-12-11 05:09:24

【问题描述】：

我正在处理一个带有可点击元素的数据表。行的一列包含一个超链接。单击超链接时，我不希望触发或管理行单击事件（选择/取消选择）。

我对 R Shiny 的尝试：

function preventDefault(e) 
   e.preventDefault();
   e.stopPropagation();

   return false;

DataTable 中包含链接的元素：

<a href="#" onclick="preventDefault(event)";>

但是什么也没发生。

完整源代码：

library(shiny)
library(DT)
library(dplyr)

ui <- fluidPage(

   # Application title
  DT::dataTableOutput("DTExample")


)

server <- function(input, output) 
  dat <- head(iris)

  dat <- dat %>% mutate(clickme = '<a href="#" 
                     onclick="event.preventDefault(); event.stopPropagation(); alert(event); return false;";
                     >CLICKME</a>')

  output$DTExample<- renderDataTable(
    datatable(dat, escape = FALSE, class = 'cell-border stripe')
  ) 


# Run the application 
shinyApp(ui = ui, server = server)

【问题讨论】：

好建议。已附上示例代码。

【参考方案1】：

问题的发生是因为“突出显示操作”绑定到“mousedown”，这发生在“click”事件之前。你无法阻止之前发生的事件，对吧？

一个简单的解决方案是使用onmousedown 而不是onclick

dat <- dat %>% mutate(clickme = '<a href="#" 
                    onmousedown="event.preventDefault(); event.stopPropagation(); alert(event); return false;";
                    >CLICKME</a>')

顺便说一句，您可以使用 chrome F12 来检查事件侦听器。您可以删除一些侦听器以查看差异并找到哪个侦听器用于“突出显示”

另外，我发现这是因为当我单击链接但未释放时，突出显示发生但单击未发生。然后我意识到这可能是关键并使用 Chrome 检查事件侦听器。希望你能理解调试的方式！

【讨论】：

太棒了，完美运行。只需删除alert(event); 即可打开链接，当然没有行选择，但没有警告消息

我发现onmousedown='event.stopPropagation();' 在这种情况下足以阻止事件冒泡。

是的，我只是做了最少的修改以使其工作，因为关键是 onmousedown 和 onclick 之间的区别。