#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.


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

 var events = mapG.selectAll("circle")
        .attr("class", 'events')
        .style("display", dateMatch)
        .style("pointer-events", "auto")
        .attr("classed", "visible")
        .on("click", function(d) { 
            console.log('first click!')
            overflow: 'hidden'

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

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


div.county2014Tooltip { 
    word-wrap: normal;
    position: absolute;
    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.