Adding a link inside scrolling popup disables all click events?

Question

I have a popup I've created in d3.js, where it's basically a Div that I scale to 1 on a click-event, and scale to 0 on a second click event anywhere else (i.e. click-off event).

Without being able to post all the code in a reproducible example, here's the relevant code.

The issue:

The popup works fine, until a link is added within the popup html (this line: "hello".link("https://www.google.com")). When a click-able link is added, you can't scroll the popup and it appears that all pointer events are disabled. I'm not sure what about adding a link would cause it to do this.

I've tried to use href instead of .link and it still does not work.

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 ;
}

Thank you.

@DiamondJoe12 have you tried after changing the style of parent element `body` ? like `overflow: 'auto'; height:100vh` etc — shubham jha, Aug 19 '21 at 08:50

score 1 · Answer 1 · answered Aug 13 '21 at 01:34

1

Try updating your problem line to this:

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

answered Aug 13 '21 at 01:34

Adam Neuwirth

529
5
10

score 0 · Answer 2 · answered Aug 09 '21 at 15:49

0

I usually don't use the link method as it is deprecated, and prefer the href property. Not sure if this would solve your problem, but is best practice anyway. Good Luck!

answered Aug 09 '21 at 15:49

videap

66
5

thank you! would I just use the href tag in building the popup in var popInfo? – DiamondJoe12 Aug 09 '21 at 15:57
It is not the href tag, is the anchor tag with href property defined. For example: This is a link to google – videap Aug 09 '21 at 16:01
shoot, still no luck. I will edit answer to let people know I've tried this . – DiamondJoe12 Aug 09 '21 at 16:20

score 0 · Answer 3 · edited Dec 10 '21 at 08:35

0

I figured out the answer to this, or at least something that got it to work. I only put the link in the popup initiated by click, and that worked. When I put the link in both popups (the one initiated by hover and click), it broke.

edited Dec 10 '21 at 08:35

halfer

19,824
17
99
186

answered Aug 19 '21 at 12:54

DiamondJoe12

1,879
7
33
81

Adding a link inside scrolling popup disables all click events?

3 Answers3