Search code examples
javascriptgoogle-chromekineticjs

KineticJS click on right side of Rect not working in Chrome


In Chrome, the following looks okay when drawn, and click on the Rect works most of the time, but clicking near the right-hand side of the rectangle does not seem to work. Any ideas? (Modify "./_js/library" to point to your copy of KineticJS).

Firefox and IE10 seem to be okay.

<!DOCTYPE html>
<html>
 <head>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="./_js/library/kinetic-v5.0.0.js"></script>
  <script type='text/javascript'>

   var OnLoad = function(){
    var kstage = new Kinetic.Stage(   {'container':'divContainer' ,'width':800 ,'height':200}   );
    var klayer = new Kinetic.Layer();
    var krect  = new Kinetic.Rect( {'fill':'#DDFFDD' ,'x':0 ,'y':0 ,'width':790 ,'height':100} );
    krect.on(   'click'   ,function(a){ 
      jQuery('#divResult').text( 'Clicked: '+ kstage.getPointerPosition().x ); 
    });
    klayer.add( krect  );
    kstage.add( klayer );
   }
   jQuery(window)['load']( OnLoad );
  </script>
 </head>
 <body>
  <div id="divContainer" width=800 height=200 style="border:1px solid #FF0000"></div>
  <div id="divResult">Hello</div>
 </body>
</html>

Solution

  • FYI: Turned out to be a bug in KineticJS that has now been fixed.