bugfix> javascript > 投稿

divのsvg Rect.Onclickがあり、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はdemo divのクリックで表示されます

回答 2 件
  • このようなことを意味するので、テキストをクリックすると、アラートが実行されます。

    それ以外の場合は、テキストをクリックするたびに1つのアラートを取得し、2回目に2つのアラートを取得するなど、アラートをハンドラーの外部に移動しました。

    $('#svgid').click(function()
        {
           alert("clicked");
        });
    document.getElementById("demo").addEventListener("click",     function()
    {
      document.getElementById("svgid").dispatchEvent(new Event('click'));
    });
    
    
    <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>
    
    

  • これを実装するには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>
    
    

あなたの答え