Блог

У меня есть всплывающее окно, которое я создал в 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 ;
}
 

Спасибо.

Попробуйте обновить свою проблемную строку до этого:

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

Обычно я не использую метод ссылки, поскольку он устарел, и предпочитаю свойство href. Не уверен, что это решит вашу проблему, но в любом случае это лучшая практика. удачи!

Я нашел ответ на этот вопрос или, по крайней мере, что-то, что заставило его работать. Я только поместил ссылку во всплывающее окно, инициированное щелчком, и это сработало. Когда я поместил ссылку в оба всплывающих окна (то, которое было инициировано наведением и щелчком мыши), она сломалась.