जोड़ना घटनाओं

अरे, मैं एक MouseMove जोड़ सकते हैं और एक एसवीजी राफेल आयत को घटना क्लिक करने के लिए कोशिश कर रहा हूँ:जोड़ना घटनाओं

फिडल: http://jsfiddle.net/neuroflux/nXKbW/1/

कोड:

tile = ctx.rect(x*10,y*(i*10),10,10).attr({ 
    fill:'#000000', 
    stroke: '#ffffff' 
}); 
tile.mouseover(function(e) { 
    pX = e.pageX; 
    pY = e.pageY; 
}); 
tile.click(function() { 
    console.log('x: '+pX+'| y:'+pY); 
});

जाहिर है, के लिए कुछ कारण यह काम नहीं करता है - मुझे कोई आउटपुट नहीं मिलता है: '(

स्रोत

2011-05-23 Barrie Reader

क्षमा करें, यह स्पष्ट था कि आपने उन्हें देखा था। बिंदु चर न गुंजाइश होनी है। http://jsjoy.com/blog/10/raphael-js-adding-scoped-event-handlers इस बाहर checkt –

मैं उस लिंक से संपादित Raphael.js फ़ाइल का उपयोग किया है - लेकिन संचालकों अभी भी सक्रिय हो रहे: ( –

ठीक है, लटकाओ। किसी भी तरह तुम्हारी पहेली मेरे लिए आईई और फ़ायरफ़ॉक्स दोनों लटकती है। –

ठीक है मुझे क्लिक करने के लिए क्लिक फ़ंक्शन मिल गया है। अंत में^_^

<!DOCTYPE html> 
<html> 
    <head> 
     <title></title> 
     <script type="text/javascript" src="https://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script> 
     <script type="text/javascript"> 
      /* GLOBAL VARIABLES */ 
      var drawFrames; 
      var canvas; 
      var ctx; 
      var universe = new Array(); 
      var tile; 
      var pX,pY = 0; 

      universe = (
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]], 
       [[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0],[0,0]] 
      ); 

      /* WINDOW LOAD */ 
      window.onload = function() { 
       init(); 
      } 

      /* INITIALISATION */ 
      function init() { 
       ctx = Raphael(10, 50, 320, 200); 
       drawFrames = setInterval(drawFrame, 40); 
      } 

      /* FRAME RENDER LOOP */ 
      function drawFrame() { 
       //ctx.clear(); 
       for (var x = 0; x < universe.length; x++) { 
        for (var y = 0; y < universe[x].length; y++) { 
         for (var i= 0; i < 11; i++) { 
          tile = ctx.rect(x*10,y*(i*10),10,10).attr({ 
           fill:'#000000', 
           stroke: '#ffffff' 
          }).click(function(e) { 
         console.log('x: '+e.pageX+'| y:'+e.pageY); 
         }) 
        } 
       } 

      } 
     } 
     </script> 
    </head> 
    <body> 
     <canvas id="main" width="800" height="600"> 
      <h1>No Support I'm Afraid...</h1> 
     </canvas> 
    </body> 
</html>

स्रोत

2011-05-23 10:54:29

लवली jubbly है, आपको बहुत बहुत धन्यवाद! +1 –

यह प्रत्येक तत्व के लिए होने के लिए और नहीं रेक्ट तत्वों के पूरे सेट thats क्यों यह ठीक ढंग से सक्रिय नहीं किया गया था। –

ओह और राम के उपयोग के लिए कारण यह है कि setInterval की वजह से था! आप setTimeout का उपयोग है कि या तो ऐसा नहीं होता है :) –

पहले अपनी रैफेल ऑब्जेक्ट को एक आईडी दें और उसके बाद क्लिक ईवेंट को बाध्य करें।

tile = ctx.rect(x*10,y*(i*10),10,10).attr({ 
fill:'#000000', 
stroke: '#ffffff' 
}); 
tile.node.id='tile_id'; 
$('#tile_id').bind('click',function(){alert('clicked');});

स्रोत

2011-08-04 21:24:33

जोड़ना घटनाओं

उत्तर

संबंधित मुद्दे