Question

我有一个svg Rect.Onclick一个div我需要点击svg rect。这里我附上了代码

<div id="demo" class="demo">click here</div>
<p id="demo1"></p>  
<svg width="50" height="50" id="svgid">
  <rect width="50" height="50" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

脚本代码是

<script>
document.getElementById("demo").addEventListener("click", function()
{
  document.getElementById("demo1").innerHTML = "Hello World";
    $('#svgid').click(function()
    {
       alert("clicked");

    });
});
</script>

此处Hello World显示点击演示div

Answer 1

你的意思是这样的，所以当你点击文本时，就会运行警报。

我将警报移到处理程序之外，否则您第一次点击文本时会收到一条警报，然后第二次发出警报，依此类推。

＆＃13;

$('#svgid').click(function()
    {
       alert("clicked");

    });
document.getElementById("demo").addEventListener("click",     function()
{
  document.getElementById("svgid").dispatchEvent(new Event('click'));
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo" class="demo">click here</div>
<p id="demo1"></p>  
<svg width="50" height="50" id="svgid">
  <rect width="50" height="50" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>

＆＃13;

Answer 2

有两种方法可以实现这一点，首先，您可以将onclick="clicked()"添加到html元素，然后在javascript中您只需要定义函数

<script>
  function clicked_stv(){
    alert('it happened');
  };
</script>

或者，如果您使用的是jquery，

$(document).ready(function() {
  $('#svgid').click(function() {
    alert('It happened');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="demo" class="demo">click here</div>
<p id="demo1"></p>
<svg width="50" height="50" id="svgid">
    <rect width="50" height="50" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
  </svg>
</div>

如何使用Javascript单击一个div的svg元素？

2 个答案: