title: pixi.js: Stop Rotate when click on sprite?
body: <p>I want to <strong>stop rotate</strong> when click on <a href="http://pixijs.github.io/examples/index.html?s=basics&amp;f=basic.js&amp;title=Basics" rel="nofollow">Sprite Image</a>. How could I do this? I want to click that Bunny and have it stop rotating, and when i click it again ,it will start rotating again. Thank you.</p>
  
  <pre><code>var renderer = PIXI.autoDetectRenderer(400, 300, { backgroundColor: 0x1099bb });
  $("#container").append(renderer.view);
  var stage = new PIXI.Container();
  
  var texture = PIXI.Texture.fromImage("/Content/img/bunny.png");
  var bunny = new PIXI.Sprite(texture);
  
  bunny.anchor.x = 0.5;
  bunny.anchor.y = 0.5;
  bunny.position.x = 200;
  bunny.position.y = 150;
  
  stage.addChild(bunny);
  
  animate();
  
  function animate()
  {
      requestAnimationFrame(animate);
      bunny.rotation += 0.1;
  
      renderer.render(stage);
  }
  
  function onClick(eventData)
  {
  
  }
  </code></pre>
  
  <blockquote>
    <p>I Updated my Code ,the click event can work now,but how to unbind <strong>onclick</strong> event?</p>
  </blockquote>
  
  <pre><code>var bunny = PIXI.Sprite.fromImage("/Content/img/bunny.png");
  //var bunny = new PIXI.Sprite(texture);
  
  bunny.anchor.x = 0.5;
  bunny.anchor.y = 0.5;
  bunny.position.x = 200;
  bunny.position.y = 150;
  bunny.interactive = true;
  
  bunny.on("click", onClick);
  stage.addChild(bunny);
  
  renderImage();
  
  function renderImage()
  {
      requestAnimationFrame(renderImage);
      renderer.render(stage);
  }
  
  function animate()
  {
      requestAnimationFrame(animate);
      bunny.rotation += 0.1;
      renderer.render(stage);
  
  }
  
  function onClick(eventData)
  {
      //animate()
      requestAnimationFrame(animate);
  
  }
  </code></pre>