#StackBounty: #javascript #html #css #d3.js #pointer-events Adding a link inside scrolling popup disables all click events?

Bounty: 50

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.


Get this bounty!!!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.