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

Question

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

我在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)

- Liang

---

好的建议。已附上示例代码。 - Liang

Answer 1

问题发生的原因是“高亮操作”绑定在“mousedown”上，而“mousedown”事件发生的时间比“click”事件更早。你无法阻止先前发生的事件，对吧？

一个简单的解决方案是使用onmousedown代替onclick。

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

顺便提一下，您可以使用Chrome F12来检查事件监听器。您可以删除一些监听器以查看区别，并找到哪个监听器是为“highlight”服务的。

同时，我发现当我点击但没有释放链接时，高亮显示发生了，但点击事件没有发生。然后我意识到这可能是关键，并使用Chrome检查事件监听器。我希望您能理解调试的方式！

- VicaYang

---

太棒了，完美运作。只需要移除 alert(event); 就能打开链接，当然不会选择任何行，也没有警告消息。 - aurelien

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

是的，我只做了最少的修改使其工作，因为关键在于 onmousedown 和 onclick 之间的差异。 - VicaYang