Question

将鼠标悬停事件添加到Google图表svg元素时，firefox和chrome之间的结果会有所不同（chrome正在做我期望的事情）。我想要实现的是用户悬停在图表上的能力而不关心他与线的距离 - 悬停应该是平滑且易于使用的。

以下是相关的plunker：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>

将鼠标悬停在图表上以查看预期的behaiour。用firefox将鼠标悬停在图表上以查看问题。不知道怎么解决这个问题？这是一个谷歌图表错误？我是否向错误的元素添加了一个事件监听器？

Answer 1

似乎你的svg中的子标签正在捕捉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 个答案: