我正在尝试为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>