在滚动弹出窗口中添加链接会禁用所有点击事件？答案

【问题标题】：Adding a link inside scrolling popup disables all click events?在滚动弹出窗口中添加链接会禁用所有点击事件？
【发布时间】：2021-10-13 07:24:07
【问题描述】：

我在 d3.js 中创建了一个弹出窗口，它基本上是一个 Div，我在点击事件时缩放为 1，在其他任何地方（即点击关闭事件）的第二次点击事件中缩放为 0 .

由于无法在可重现的示例中发布所有代码，以下是相关代码。

问题：

弹出窗口工作正常，直到在弹出窗口 html 中添加一个链接（此行："hello".link("https://www.google.com")）。添加可单击链接后，您无法滚动弹出窗口，并且似乎所有指针事件都已禁用。我不确定添加链接会导致它这样做。

我尝试使用href 代替.link，但还是不行。

javaScript：

    var LeafletDiv = d3.select("#content").append("div")   
        .attr("class", "county2014Tooltip")  
        .style("opacity", 1)
        .style("scrollTop", 0)



 var events = mapG.selectAll("circle")
        .data(eventArray)
        .enter().append("circle")
        .attr("class", 'events')
        .style("display", dateMatch)
        .style("pointer-events", "auto")
        .attr("classed", "visible")
      
        .on("click", function(d) { 
            console.log('first click!')
            $('body').css({
            overflow: 'hidden'
            });

        LeafletDiv.transition()        
            .duration(200)      
            .style("opacity", .9)
            .style("transform","scale(1)")
         
                var popInfo = '<br/>' + d.EventDate
                +  '<br/>' + "hello".link("https://www.google.com") //this causes it to break
                + '<br/>'
                             
                appendText.push(popInfo+ '<br/>' + '<br/>')
                                        
                })

            LeafletDiv
                .html( appendText.join(""))
                .style("pointer-events", 'all')

CSS：

div.county2014Tooltip { 
    word-wrap: normal;
    position: absolute;
    pointer-events:none;
    overflow-y:scroll; 
    overflow-wrap: break-word;
    word-wrap: break-word;
    display:inline-block ;
}

谢谢。

【问题讨论】：

您使用的是哪个 d3 版本？ v6+ ?
我正在使用：d3js.org/d3.v4.min.js
@DiamondJoe12 更改父元素body 的样式后你试过了吗？比如overflow: 'auto'; height:100vh等

标签： javascript html css d3.js pointer-events

【解决方案1】：

我想出了这个问题的答案，或者至少是让它发挥作用的东西。我只将链接放在由单击启动的弹出窗口中，并且有效。当我将链接放入两个弹出窗口（通过悬停和单击启动的那个）时，它就坏了。

【讨论】：

【解决方案2】：

尝试将您的问题行更新为：

var popInfo = '<br/>' + d.EventDate
+ '<br/><a href="https://google.com">hello</a>' //changed to a html link tag
+ '<br/>'

【讨论】：

【解决方案3】：

我通常不使用链接方法，因为它是deprecated，而更喜欢 href 属性。不确定这是否会解决您的问题，但无论如何都是最佳做法。祝你好运！

【讨论】：

谢谢！我会在 var popInfo 中只使用 href 标记来构建弹出窗口吗？
不是href标签，是定义了href属性的锚标签。例如：google.com">This 是指向 google 的链接
拍摄，仍然没有运气。我将编辑答案，让人们知道我已经尝试过了。