我在d3中有一个点覆盖的地图。我希望用户能够点击点，并弹出一个将是滚动的弹出窗口。然后，当用户点击关闭（在任何地方的主体），我希望弹出窗口消失。mouseover也是如此-在mouseover上显示弹出窗口，在MouseOut上隐藏。

以下是网站:https://shmoss.github.io/town_sounds/#

我的问题:

我的代码在桌面上和我的iPhone11上都很好。但是，在其他iPhones上测试时，如果打开一个弹出窗口，单击关闭，然后重新单击另一个弹出窗口，则该弹出窗口将被冻结。它不滚动，即指针事件显示为禁用。底部有视频。

这是我的代码，尽量简洁:

//build d3 events (circles)
var events = mapG.selectAll("circle")
        .data(eventArray)
        .enter().append("circle")
        .style("class", 'events')
        .on("mouseover", function(d) { 

            //add popup - set opacity to make visible
            LeafletDiv.transition()        
                .duration(200)      
                .style("opacity", .9)
                .style("scrollTop", 0)


                var popInfo = '<br>' + d.Venue + '<br>' 

                LeafletDiv
                .html(popInfo)
                .style("top", "1.5vh")
                .style("text-align", 'left')

        }
       
    //on-click event
    .on("click", function(d) { 
        $('body').css({
            overflow: 'hidden'
        });

        //disable hover event listeners
        d3.selectAll(".events").on("mouseout", null);
        d3.selectAll(".events").on("mouseover", null);

        //add popup   
        var value2014 = currentMap.get(d.location);  

        LeafletDiv.transition()        
            .duration(200)      
            .style("opacity", .9);

                selections = d3.selectAll(".events").filter(function(d){

                return d.Date == this_date 

                })

                //populate html for popup
                var appendText = []
                selections.each(function(d){

                var popInfo = '<br>' + d.Venue + '<br>'                   
                appendText.push(popInfo+ '<br/>' + '<br/>')
              
                })
            //append html to popup                 
            LeafletDiv
                .html( appendText.join(""))
                .style("top", "1.5vh")
                .style("text-align", 'left')
                .style("pointer-events", 'auto')
          

        $('.county2014Tooltip').scrollTop(0);

        d3.event.stopPropagation();

        // if user clicks a SECOND time, anywhere, make popup disappear
        d3.select("body").on("click", function(d) { 
            console.log("clicking off popup")

                //hide popup
                var elements = d3.select(LeafletDiv)
                elements.scrollTop = 0
       
                LeafletDiv.transition()        
                    .duration(200)      
                    .style("opacity", 0)
                    .style("pointer-events", 'none') 
                    .attr("scrollTop", 0) 
                    //revert back to hover, unless user clicks again!
                    d3.selectAll(".events").on("mouseout", true);
                    d3.selectAll(".events").on("mouseover", true);
                    d3.selectAll(".events").on("mouseout", function(d) { 
                    //mousing out, hide popup!     
                    LeafletDiv.transition()        
                        .duration(200)      
                        .style("opacity", 0);        
                    })

                    // mouseover event listers added back in
                    d3.selectAll(".events").on("mouseover", function(d) { 
                    LeafletDiv.transition()        
                        .duration(200)      
                        .style("opacity", .9);

                    LeafletDiv .html('<br>' + d.Venue + '<br>'
                    )
                        .style("top", "1.5vh")
                        .style("text-align", 'left')

                })
                      
        })
    })

    //on mouseout, hide popup
    .on("mouseout", function(d) {       
        LeafletDiv.transition()        
            .duration(200)      
            .style("opacity", 0)
            .style("scrollTop", 0)  
    })

记录行为的视频:

iPhone 11（代码完全相同，但工作正常）:

https://www.youtube.com/watch?v=_3ma4bjyiym

其他iPhone 11（完全相同的代码，不起作用:)

https://www.youtube.com/watch?v=ofbbodniw1e

我尝试的内容:

出于某种原因，使用具有工作持续时间的转换。作为当前不透明方法的替代，这项工作。但是它看起来很不专业，我很困惑为什么上面的代码不能通用。

顺晟科技：

如果您正在使用传单，并且只需要圆圈和弹出窗口，您可以使用传单本身的circleMarker和弹出窗口。它可能比D3更容易实现。

https://leafletjs.com/reference-1.7.1.html#circlemarker

https://leafletjs.com/reference-1.7.1.html#popup

使用CSS可以获得所需的所有样式/转换。