logo标签列表

jQuery: SVG的鼠标滚轮事件

jquerysvgmousewheel
3

我正在尝试为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>
1个回答
2
使用以下函数将事件绑定到 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>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接