Question

作为标题！我希望<circle>可以点击使用javascript onclick事件或JQuery。但我不知道怎么办？

谢谢！

Answer 1

这是您在jsbin.com中的代码段中的精确代码

它有效

如果你想走那条道路，其他答案会有关于如何使用jquery的提示

我建议jquery使用onclick属性，更灵活

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
<svg height='600' width='820'>
  
 <script>
   function test(){
     alert("yyyy")
   }
 </script> 
  
<circle onclick="test()" cx="20" cy="30" fill="black" r="20"></circle>
</svg>
</body>
</html>

Answer 2

正如我在上面评论过的，您的代码运行正常，其中没有任何问题。

使用jquery can be done like this.在圈子上获取点击事件的方法您应该avoid使用inline个事件。read here

$('circle').on("click",function(){
  console.log($(this).attr("cy"));//30
 test();//your function getting called on click of circle. 
  })

   
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>My Circle</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>
</head>
<body>
<svg height='600' width='820'>
  
 <script>
   function test(){
     alert("yyyy");
   }
 </script> 
  
<circle  cx="20" cy="30" fill="black" r="20"></circle>
</svg>
</body>
</html>

Answer 3

~~您的代码在我的Chrome上完美运行，但在Firefox上则无法运行。因此，只需在警报结束时添加分号;即可。将其更改为： alert("yyyy");~~

<强>更新

jsbin上的代码很好。在单击使用JS运行之后，它才会起作用

Answer 4

试试这个

<强> HTML

mapData.images = [];
for(var i = 0; i < resp.length; ++i){
  mapData.images.push({
    type: "circle",
    color:"#FF0000",
    latitude: parseFloat(resp[i].latitude),
    longitude: parseFloat(resp[i].longitude)
  });
}
map.validateData();

<强> JS

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" id='circ' />
</svg>

Answer 5

我发现您的问题只是在jsbin的Auto-run js窗口中勾选output。

或者你可以按

使用js

运行

如何使svg <circle>可点击

5 个答案: