jQuery：svg 的鼠标滚轮事件答案

【问题标题】：jQuery : Mousewheel event for svgjQuery：svg 的鼠标滚轮事件
【发布时间】：2016-02-23 07:22:43
【问题描述】：

我正在尝试为 svg 实现鼠标滚轮事件。我正在使用下面的代码。如果我使用 $(document).bind()，这很好用，但如果我使用 svg id svgmain，它就不起作用。我希望鼠标滚轮只能在 svg 中工作。如何得到它？

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js" > </script>
    <script>
      $("#svgmain").bind("mousewheel", function(event) {
        $("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY );  
      });
    </script>    
  </head>
  <body>
    <div id="log"></div>
    <svg id="svgmain" xmlns="http://www.w3.org/2000/svg" version="1.1" style="background-color:blue;">
      <g id="g">
        <circle id="circle" cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
      </g>
    </svg>
  </body>
</html>

【问题讨论】：

标签： jquery svg mousewheel

【解决方案1】：

使用以下函数将事件绑定到svg 元素。

 $(document).on('mousewheel', "#svgmain", function() {
   // your code here 
  });

下面的工作代码。

<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js">
  </script>
  <script>
    $(document).on('mousewheel', "#svgmain", function() {
      $("#log").text("pageX: " + event.pageX + ", pageY: " + event.pageY);
    });
  </script>
</head>

<body>
  <div id="log"></div>
  <svg id="svgmain" xmlns="http://www.w3.org/2000/svg" version="1.1" style="background-color:blue;">
    <g id="g">
      <circle id="circle" cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
    </g>
  </svg>
</body>

</html>

【讨论】：