將鼠標懸停在Google圖表上，在Firefox上運行異常

Question

當將懸停事件添加到google chart svg元素時，Firefox和chrome之間的結果是不同的（chrome達到了我的預期）。 我要實現的是用戶能夠在圖表上懸停而不關心其與直線的距離的能力-懸停應該流暢且易於使用。

這是相關的插件： https ://plnkr.co/edit/2IF2BnX0tS2wznAUr5bs ? p = preview

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <script src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
    <script>
    google.charts.load('current', {
        callback: drawChart,
        packages: ['corechart']
    });

    function drawChart() {
        var dataTable = new google.visualization.DataTable({
            cols: [
                { id: 'x', label: 'Num', type: 'number' },
                { id: 'y', label: 'Fn', type: 'number' }
            ]
        });

        for (var i = 0; i < 1000; i++) {
            var xValue = { v: i };
            var yValue = { v: i };

            // add data row
            dataTable.addRow([
                xValue,
                yValue
            ]);
        }

        var container = document.getElementById('chart_div');
        var chart = new google.visualization.ChartWrapper({
            chartType: 'LineChart',
            dataTable: dataTable,
            options: {
                hAxis: {
                    gridlines: {
                        color: 'transparent'
                    },
                    title: 'Hover here is also fine'
                },
                tooltip: {
                    trigger: "none"
                },
                vAxis: {
                    gridlines: {
                        color: 'transparent'
                    },
                    title: 'Hover here is OK'
                }
            }
        });

        // add hover line
        google.visualization.events.addOneTimeListener(chart, 'ready', function () {
            var svgParent = container.getElementsByTagName('svg')[0];
            var layout = chart.getChart().getChartLayoutInterface();
            var lineHeight = layout.getBoundingBox('chartarea').height - 18;
            var lineTop = layout.getBoundingBox('chartarea').top;

            var hoverLine = container.getElementsByTagName('rect')[0].cloneNode(true);
            hoverLine.setAttribute('y', lineTop);
            hoverLine.setAttribute('height', lineHeight);
            hoverLine.setAttribute('width', '1');
            hoverLine.setAttribute('stroke', 'none');
            hoverLine.setAttribute('stroke-width', '0');
            hoverLine.setAttribute('fill', '#cccccc');
            hoverLine.setAttribute('x', 0);
            svgParent.appendChild(hoverLine);

            svgParent.addEventListener("mousemove", function (e) {
                hoverLine.setAttribute('x', e.offsetX);
            });
        });

        chart.draw(container);
    }
</script>
<div id="chart_div"></div>

將鼠標懸停在帶有鉻的圖表上以查看預期的行為。 將鼠標懸停在圖表上並使用Firefox查看問題。 任何想法如何解決這個問題？ 這是Google圖表錯誤嗎？ 我是否將事件偵聽器添加到錯誤的元素？

Answer 1

看來您svg中的children標簽正在捕獲mousemove事件（由於事件傳播而使之發生）。

只需向這些子元素添加一個指針事件：none（我建議對該svg元素使用一個id）

 svg *{ pointer-events: none; }

 <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> </head> <body> <script> google.charts.load('current', { callback: drawChart, packages: ['corechart'] }); function drawChart() { var dataTable = new google.visualization.DataTable({ cols: [ {id: 'x', label: 'Num', type: 'number'}, {id: 'y', label: 'Fn', type: 'number'} ] }); for (var i = 0; i < 1000; i++) { var xValue = { v: i }; var yValue = { v: i }; // add data row dataTable.addRow([ xValue, yValue ]); } var container = document.getElementById('chart_div'); var chart = new google.visualization.ChartWrapper({ chartType: 'LineChart', dataTable: dataTable, options: { hAxis: { gridlines: { color: 'transparent' }, title: 'Hover here is also fine' }, tooltip: { trigger: "none" }, vAxis: { gridlines: { color: 'transparent' }, title: 'Hover here is OK' } } }); // add hover line google.visualization.events.addOneTimeListener(chart, 'ready', function () { var svgParent = container.getElementsByTagName('svg')[0]; var layout = chart.getChart().getChartLayoutInterface(); var lineHeight = layout.getBoundingBox('chartarea').height - 18; var lineTop = layout.getBoundingBox('chartarea').top; var hoverLine = container.getElementsByTagName('rect')[0].cloneNode(true); hoverLine.setAttribute('y', lineTop); hoverLine.setAttribute('height', lineHeight); hoverLine.setAttribute('width', '1'); hoverLine.setAttribute('stroke', 'none'); hoverLine.setAttribute('stroke-width', '0'); hoverLine.setAttribute('fill', '#cccccc'); hoverLine.setAttribute('x', 0); svgParent.appendChild(hoverLine); svgParent.addEventListener("mousemove", function(e) { hoverLine.setAttribute('x', e.offsetX); }); }); chart.draw(container); } </script> <div id="chart_div"></div> </body> </html>

將鼠標懸停在Google圖表上，在Firefox上運行異常

問題描述

1 個解決方案

解決方案1
1 已采納 2017-04-17 23:22:13

將鼠標懸停在Google圖表上，在Firefox上運行異常

問題描述

1 個解決方案

解決方案1 1 已采納 2017-04-17 23:22:13

解決方案1
1 已采納 2017-04-17 23:22:13