Groups > comp.lang.javascript > #29654 > unrolled thread

Javasscript event handling upon objects.

Started by	jonas.thornvall@gmail.com
First post	2016-02-22 05:57 -0800
Last post	2016-02-22 23:05 +0100
Articles	2 on this page of 22 — 5 participants

Back to article view | Back to comp.lang.javascript

  Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 05:57 -0800
    Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 06:09 -0800
      Re: Javasscript event handling upon objects. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-02-22 15:38 +0100
      Re: Javasscript event handling upon objects. "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-02-23 19:02 -0800
        Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 01:33 -0800
          Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 01:34 -0800
        Re: Javasscript event handling upon objects. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-02-24 11:29 +0100
          Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 03:02 -0800
            Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 03:20 -0800
          Re: Javasscript event handling upon objects. "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2016-02-24 06:03 -0800
            Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 14:18 -0800
              Re: Javasscript event handling upon objects. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-02-25 01:07 +0100
                Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-24 23:36 -0800
                  Re: Javasscript event handling upon objects. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-02-25 10:35 +0100
    Re: Javasscript event handling upon objects. "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2016-02-22 15:27 +0100
    Re: Javasscript event handling upon objects. Aleksandro <aleksandro@gmx.com> - 2016-02-22 12:11 -0300
      Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 07:37 -0800
        Re: Javasscript event handling upon objects. Silvio <silvio@internet.com> - 2016-02-22 16:47 +0100
          Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 10:29 -0800
            Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 13:23 -0800
              Re: Javasscript event handling upon objects. jonas.thornvall@gmail.com - 2016-02-22 13:34 -0800
                Re: Javasscript event handling upon objects. Silvio <silvio@internet.com> - 2016-02-22 23:05 +0100

Page 2 of 2 — ← Prev page 1 [2]

#29666

From	jonas.thornvall@gmail.com
Date	2016-02-22 13:34 -0800
Message-ID	<d986f69a-8723-4775-ae04-86b716d83c8b@googlegroups.com>
In reply to	#29665

Den måndag 22 februari 2016 kl. 22:23:49 UTC+1 skrev jonas.t...@gmail.com:
> Den måndag 22 februari 2016 kl. 19:29:55 UTC+1 skrev jonas.t...@gmail.com:
> > Den måndag 22 februari 2016 kl. 16:47:58 UTC+1 skrev Silvio:
> > > On 02/22/2016 04:37 PM, jonas.thornvall@gmail.com wrote:
> > > > Den måndag 22 februari 2016 kl. 16:11:47 UTC+1 skrev Aleksandro:
> > > >> On 22/02/16 10:57, jonas.thornvall@gmail.com wrote:
> > > >>> Why does not javascript objects have the possibility of adding event handler properties like mouse click, drag, drop?
> > > >>
> > > >> Javascript objects alone have nothing to do with UI interaction. If you
> > > >> want your object to respond to it, bind said events of a visual element
> > > >> to the methods you need.
> > > >
> > > > Well i just learned howto catch the mouse events, and now i am interested in how i can for example generate an array of 100 rectangles print them out and then mark one on click and move it.
> > > >
> > > > The only way i understand it work is to actually check if the click is within any of the rectangles boundaries. And then change the rectangle cordinates to the mouse cordinates using animation to draw out the new position?
> > > >
> > > > Well i will post my example code soon, and you can tell if it is the wrong way to do it.
> > > >
> > > 
> > > Depends on what you are doing. If your array of rectangles is actually 
> > > an array of DOM objects (for example a bunch of DIVs positioned inside 
> > > some parent container element or perhaps SVG objects) then you could 
> > > indeed register the listeners on those "rectangles".
> > > 
> > > The basic fact is that registering event handlers is defined on DOM 
> > > elements.
> > > 
> > > If you have your own definition of rectangles you will still need a DOM 
> > > object that you use to represent them on (draw) and that will give you 
> > > events that you can map back to your rectangles. Something like a canvas 
> > > would work fine...
> > 
> > The logic with the eventhandlers somehow escape me why isnt't mouseup and mousedown booleans i get the object. But i fail to see how i can release it so maybe the approach is wrong?
> > 
> > <!DOCTYPE html>
> > <html>
> > <head>
> >     <meta http-Equiv="content-type" content="text/html; charset=UTF-8">
> > </head>
> > <body bgcolor="black" onload="scriptload();" link="white" vlink="gold" alink="black">
> > <div id="container" style="width:10000px">
> > <div id="menu" style="background-color:darkgray;height:10000px;width:190px;float:left;">
> > <table border="2" bgcolor="beige" width=190><tr>
> > <td bgcolor="green" align="middle">
> > <form name=Edoit onSubmit="initanime(); return false;">
> > <input type=submit name="init_anime" value="Anim"></form></td>
> > <td bgcolor="red" align="middle">
> > <form name=Fdoit onSubmit="stopanime(); return false;">
> > <input type=submit name="stop_anime" value="haltA">
> > </form></td></tr></table>
> > </div>
> > <div id="content" style="background-color:gray;height:10000px;width:10000;float:left;">
> > <canvas id="myCanvas" width="9800" height="9800">Your browser does not support the HTML5 canvas tag.</canvas>
> > </div>
> > <div id="footer" style="background-color:royalblue;clear:both;text-align:left;">
> > Copyright © Jonas Thörnvall <font color="gold" size="1">jonas.thornvall@hotmail.com
> > </div>
> > </body>
> > </html>
> > 
> > <script type="text/javascript">
> > // GLOBAL VARIABLES
> > 
> > var refresh = 5;
> > var timer = 5;
> > 
> > //Get X,Y cordinates mouse position
> > function getPosition(canvas, evt) {
> >         var rect = canvas.getBoundingClientRect();
> >         return {
> >           x: evt.clientX - rect.left,
> >           y: evt.clientY - rect.top
> >         };
> > }
> > 
> > // Onload
> > function scriptload()
> > {
> >    canvas = document.getElementById("myCanvas");
> >    ctx = canvas.getContext("2d");
> >    initscript();
> >    listeners();
> >    startanime();
> > }
> > 
> > //Listenters logic
> > function listeners(){
> > myCanvas.addEventListener("mouseup", function(evt){
> >         mouseUp = getPosition(canvas, evt);
> >         message = 'Mouse up: ' + mouseUp.x + ',' + mouseUp.y;
> >        }, false);
> > myCanvas.addEventListener("mousedown", function(evt){
> >         mouseDown = getPosition(canvas, evt);
> >         message = 'Mouse down: ' + mouseDown.x + ',' + mouseDown.y;
> >        }, false);
> > myCanvas.addEventListener('mousemove', function(evt) {
> >        mousePos = getPosition(canvas, evt);
> >        message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
> >        }, false);
> > }
> > 
> > 
> > 
> > //Initiate values
> > function initscript()
> > {
> > hold=false;
> > message="";
> > mousePos = [0,0];
> > mouseDown = [0,0];
> > mouseUp=[0,0]
> > SQwidth=20,SQheigth=20,SQposX=200,SQposY=200;
> > }
> > 
> > //Paint logic
> > function redraw()
> > {
> >            //Clear canvas
> >            ctx.clearRect(0, 0, canvas.width, canvas.height);
> >            listener_logic();
> >            //Redraw canvas
> >            paint_out(canvas,message);
> > }
> > 
> > //How program behave on mouse click, drag, drop
> > function listener_logic(){
> > if (mouseDown.x>=SQposX && mouseDown.x<=(SQposX+SQwidth) && mouseDown.y>=SQposY && mouseDown.y<=(SQposY+SQwidth)){
> > message = 'Got it:' + mousePos.x + ',' + mousePos.y;
> > hold=!hold;
> > } 
> > }
> > 
> > //Paint out and redraw stuff on canvas
> > function paint_out(canvas, message)
> > {
> >    if (hold==true){SQposX=mousePos.x-10;SQposY=mousePos.y-10;  }
> >    ctx.font = '18pt Calibri';
> >    ctx.fillStyle = 'black';
> >    ctx.fillText(message, 10, 25);
> >    ctx.fillStyle = "#FF0000";
> >    ctx.fillRect(SQposX,SQposY,SQwidth,SQheigth);
> > }
> > 
> > //Start animation "form"
> > function startanime()
> > {
> >    refresh = setInterval(redraw, 50);
> > }
> > 
> > //Stop animation "form"
> > function stopanime()
> > {
> >    clearInterval(refresh);
> > }
> > </script>
> 
> I just fail to see why and how mouseDown can still generate new cordinates when the mousebutton no longer pressed? And why isn't it a mousedown a boolean?
> I understan mousepos
> 
> What is actually mouseup, mousedown and mousemove they do not seem to be variables? How can a listener for mouseDown keep generating cordinates after button released?
> 
> Or is the mouseDown.x and mouseDown.y same x and y and as in the other two eventhandlers?
> 
> myCanvas.addEventListener("mousedown", function(evt){
>         mouseDown = getPosition(canvas, evt);
>         message = 'Mouse down: ' + mouseDown.x + ',' + mouseDown.y;
>        }, false); 
> 
> if (mouseDown.x>=SQposX && mouseDown.x<=(SQposX+SQwidth) && mouseDown.y>=SQposY && mouseDown.y<=(SQposY+SQwidth)){
>  message = 'Got it:' + mousePos.x + ',' + mousePos.y;
> }

I got it working but i can't judge the approach.

<!DOCTYPE html>
<html>
<head>
    <meta http-Equiv="content-type" content="text/html; charset=UTF-8">
</head>
<body bgcolor="black" onload="scriptload();" link="white" vlink="gold" alink="black">
<div id="container" style="width:10000px">
<div id="menu" style="background-color:darkgray;height:10000px;width:190px;float:left;">
<table border="2" bgcolor="beige" width=190><tr>
<td bgcolor="green" align="middle">
<form name=Edoit onSubmit="initanime(); return false;">
<input type=submit name="init_anime" value="Anim"></form></td>
<td bgcolor="red" align="middle">
<form name=Fdoit onSubmit="stopanime(); return false;">
<input type=submit name="stop_anime" value="haltA">
</form></td></tr></table>
</div>
<div id="content" style="background-color:gray;height:10000px;width:10000;float:left;">
<canvas id="myCanvas" width="9800" height="9800">Your browser does not support the HTML5 canvas tag.</canvas>
</div>
<div id="footer" style="background-color:royalblue;clear:both;text-align:left;">
Copyright © Jonas Thörnvall <font color="gold" size="1">jonas.thornvall@hotmail.com
</div>
</body>
</html>

<script type="text/javascript">
// GLOBAL VARIABLES

var refresh = 5;
var timer = 5;

//Get X,Y cordinates mouse position
function getPosition(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {
          x: evt.clientX - rect.left,
          y: evt.clientY - rect.top
        };
}

// Onload
function scriptload()
{
   canvas = document.getElementById("myCanvas");
   ctx = canvas.getContext("2d");
   initscript();
   listeners();
   startanime();
}

//Listenters logic
function listeners(){
myCanvas.addEventListener("mouseup", function(evt){
        mouseUp = getPosition(canvas, evt);
        message = 'Mouse up: ' + mouseUp.x + ',' + mouseUp.y;
       }, false);
myCanvas.addEventListener("mousedown", function(evt){
        mouseDown = getPosition(canvas, evt);
        message = 'Mouse down: ' + mouseDown.x + ',' + mouseDown.y;
       }, false);
myCanvas.addEventListener('mousemove', function(evt) {
       mousePos = getPosition(canvas, evt);
       message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
       }, false);
}



//Initiate values
function initscript()
{
hold=false;
message="";
mousePos = [0,0];
mouseDown = [0,0];
mouseUp=[0,0]
SQwidth=20,SQheigth=20,SQposX=200,SQposY=200;
}

//Paint logic
function redraw()
{
           //Clear canvas
           ctx.clearRect(0, 0, canvas.width, canvas.height);
           listener_logic();
           //Redraw canvas
           paint_out(canvas,message);
}

//How program behave on mouse click, drag, drop
function listener_logic(){
if (mouseDown.x>=SQposX && mouseDown.x<=(SQposX+SQwidth) && mouseDown.y>=SQposY && mouseDown.y<=(SQposY+SQwidth)){
message = 'Got it:' + mousePos.x + ',' + mousePos.y;
hold=true;

} else if  (mouseUp.x>=SQposX && mouseUp.x<=(SQposX+SQwidth) && mouseUp.y>=SQposY && mouseUp.y<=(SQposY+SQwidth)){
message = 'Released it:' + mousePos.x + ',' + mousePos.y;
hold=false
}
}
//Paint out and redraw stuff on canvas
function paint_out(canvas, message)
{
   if (hold==true){SQposX=mousePos.x-10;SQposY=mousePos.y-10;  }
   ctx.font = '18pt Calibri';
   ctx.fillStyle = 'black';
   ctx.fillText(message, 10, 25);
   ctx.fillStyle = "#FF0000";
   ctx.fillRect(SQposX,SQposY,SQwidth,SQheigth);
}

//Start animation "form"
function startanime()
{
   refresh = setInterval(redraw, 150);
}

//Stop animation "form"
function stopanime()
{
   clearInterval(refresh);
}
</script>

[toc] | [prev] | [next] | [standalone]

#29667

From	Silvio <silvio@internet.com>
Date	2016-02-22 23:05 +0100
Message-ID	<56cb8618$0$24084$e4fe514c@news.xs4all.nl>
In reply to	#29666

On 02/22/2016 10:34 PM, jonas.thornvall@gmail.com wrote:
> Den måndag 22 februari 2016 kl. 22:23:49 UTC+1 skrev jonas.t...@gmail.com:
>> Den måndag 22 februari 2016 kl. 19:29:55 UTC+1 skrev jonas.t...@gmail.com:
>>> Den måndag 22 februari 2016 kl. 16:47:58 UTC+1 skrev Silvio:
>>>> On 02/22/2016 04:37 PM, jonas.thornvall@gmail.com wrote:
>>>>> Den måndag 22 februari 2016 kl. 16:11:47 UTC+1 skrev Aleksandro:
>>>>>> On 22/02/16 10:57, jonas.thornvall@gmail.com wrote:
>>>>>>> Why does not javascript objects have the possibility of adding event handler properties like mouse click, drag, drop?
>>>>>>
>>>>>> Javascript objects alone have nothing to do with UI interaction. If you
>>>>>> want your object to respond to it, bind said events of a visual element
>>>>>> to the methods you need.
>>>>>
>>>>> Well i just learned howto catch the mouse events, and now i am interested in how i can for example generate an array of 100 rectangles print them out and then mark one on click and move it.
>>>>>
>>>>> The only way i understand it work is to actually check if the click is within any of the rectangles boundaries. And then change the rectangle cordinates to the mouse cordinates using animation to draw out the new position?
>>>>>
>>>>> Well i will post my example code soon, and you can tell if it is the wrong way to do it.
>>>>>
>>>>
>>>> Depends on what you are doing. If your array of rectangles is actually
>>>> an array of DOM objects (for example a bunch of DIVs positioned inside
>>>> some parent container element or perhaps SVG objects) then you could
>>>> indeed register the listeners on those "rectangles".
>>>>
>>>> The basic fact is that registering event handlers is defined on DOM
>>>> elements.
>>>>
>>>> If you have your own definition of rectangles you will still need a DOM
>>>> object that you use to represent them on (draw) and that will give you
>>>> events that you can map back to your rectangles. Something like a canvas
>>>> would work fine...
>>>
>>> The logic with the eventhandlers somehow escape me why isnt't mouseup and mousedown booleans i get the object. But i fail to see how i can release it so maybe the approach is wrong?
>>>
>>> <!DOCTYPE html>
>>> <html>
>>> <head>
>>>      <meta http-Equiv="content-type" content="text/html; charset=UTF-8">
>>> </head>
>>> <body bgcolor="black" onload="scriptload();" link="white" vlink="gold" alink="black">
>>> <div id="container" style="width:10000px">
>>> <div id="menu" style="background-color:darkgray;height:10000px;width:190px;float:left;">
>>> <table border="2" bgcolor="beige" width=190><tr>
>>> <td bgcolor="green" align="middle">
>>> <form name=Edoit onSubmit="initanime(); return false;">
>>> <input type=submit name="init_anime" value="Anim"></form></td>
>>> <td bgcolor="red" align="middle">
>>> <form name=Fdoit onSubmit="stopanime(); return false;">
>>> <input type=submit name="stop_anime" value="haltA">
>>> </form></td></tr></table>
>>> </div>
>>> <div id="content" style="background-color:gray;height:10000px;width:10000;float:left;">
>>> <canvas id="myCanvas" width="9800" height="9800">Your browser does not support the HTML5 canvas tag.</canvas>
>>> </div>
>>> <div id="footer" style="background-color:royalblue;clear:both;text-align:left;">
>>> Copyright © Jonas Thörnvall <font color="gold" size="1">jonas.thornvall@hotmail.com
>>> </div>
>>> </body>
>>> </html>
>>>
>>> <script type="text/javascript">
>>> // GLOBAL VARIABLES
>>>
>>> var refresh = 5;
>>> var timer = 5;
>>>
>>> //Get X,Y cordinates mouse position
>>> function getPosition(canvas, evt) {
>>>          var rect = canvas.getBoundingClientRect();
>>>          return {
>>>            x: evt.clientX - rect.left,
>>>            y: evt.clientY - rect.top
>>>          };
>>> }
>>>
>>> // Onload
>>> function scriptload()
>>> {
>>>     canvas = document.getElementById("myCanvas");
>>>     ctx = canvas.getContext("2d");
>>>     initscript();
>>>     listeners();
>>>     startanime();
>>> }
>>>
>>> //Listenters logic
>>> function listeners(){
>>> myCanvas.addEventListener("mouseup", function(evt){
>>>          mouseUp = getPosition(canvas, evt);
>>>          message = 'Mouse up: ' + mouseUp.x + ',' + mouseUp.y;
>>>         }, false);
>>> myCanvas.addEventListener("mousedown", function(evt){
>>>          mouseDown = getPosition(canvas, evt);
>>>          message = 'Mouse down: ' + mouseDown.x + ',' + mouseDown.y;
>>>         }, false);
>>> myCanvas.addEventListener('mousemove', function(evt) {
>>>         mousePos = getPosition(canvas, evt);
>>>         message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
>>>         }, false);
>>> }
>>>
>>>
>>>
>>> //Initiate values
>>> function initscript()
>>> {
>>> hold=false;
>>> message="";
>>> mousePos = [0,0];
>>> mouseDown = [0,0];
>>> mouseUp=[0,0]
>>> SQwidth=20,SQheigth=20,SQposX=200,SQposY=200;
>>> }
>>>
>>> //Paint logic
>>> function redraw()
>>> {
>>>             //Clear canvas
>>>             ctx.clearRect(0, 0, canvas.width, canvas.height);
>>>             listener_logic();
>>>             //Redraw canvas
>>>             paint_out(canvas,message);
>>> }
>>>
>>> //How program behave on mouse click, drag, drop
>>> function listener_logic(){
>>> if (mouseDown.x>=SQposX && mouseDown.x<=(SQposX+SQwidth) && mouseDown.y>=SQposY && mouseDown.y<=(SQposY+SQwidth)){
>>> message = 'Got it:' + mousePos.x + ',' + mousePos.y;
>>> hold=!hold;
>>> }
>>> }
>>>
>>> //Paint out and redraw stuff on canvas
>>> function paint_out(canvas, message)
>>> {
>>>     if (hold==true){SQposX=mousePos.x-10;SQposY=mousePos.y-10;  }
>>>     ctx.font = '18pt Calibri';
>>>     ctx.fillStyle = 'black';
>>>     ctx.fillText(message, 10, 25);
>>>     ctx.fillStyle = "#FF0000";
>>>     ctx.fillRect(SQposX,SQposY,SQwidth,SQheigth);
>>> }
>>>
>>> //Start animation "form"
>>> function startanime()
>>> {
>>>     refresh = setInterval(redraw, 50);
>>> }
>>>
>>> //Stop animation "form"
>>> function stopanime()
>>> {
>>>     clearInterval(refresh);
>>> }
>>> </script>
>>
>> I just fail to see why and how mouseDown can still generate new cordinates when the mousebutton no longer pressed? And why isn't it a mousedown a boolean?
>> I understan mousepos
>>
>> What is actually mouseup, mousedown and mousemove they do not seem to be variables? How can a listener for mouseDown keep generating cordinates after button released?
>>
>> Or is the mouseDown.x and mouseDown.y same x and y and as in the other two eventhandlers?
>>
>> myCanvas.addEventListener("mousedown", function(evt){
>>          mouseDown = getPosition(canvas, evt);
>>          message = 'Mouse down: ' + mouseDown.x + ',' + mouseDown.y;
>>         }, false);
>>
>> if (mouseDown.x>=SQposX && mouseDown.x<=(SQposX+SQwidth) && mouseDown.y>=SQposY && mouseDown.y<=(SQposY+SQwidth)){
>>   message = 'Got it:' + mousePos.x + ',' + mousePos.y;
>> }
>
> I got it working but i can't judge the approach.
>
> <!DOCTYPE html>
> <html>
> <head>
>      <meta http-Equiv="content-type" content="text/html; charset=UTF-8">
> </head>
> <body bgcolor="black" onload="scriptload();" link="white" vlink="gold" alink="black">
> <div id="container" style="width:10000px">
> <div id="menu" style="background-color:darkgray;height:10000px;width:190px;float:left;">
> <table border="2" bgcolor="beige" width=190><tr>
> <td bgcolor="green" align="middle">
> <form name=Edoit onSubmit="initanime(); return false;">
> <input type=submit name="init_anime" value="Anim"></form></td>
> <td bgcolor="red" align="middle">
> <form name=Fdoit onSubmit="stopanime(); return false;">
> <input type=submit name="stop_anime" value="haltA">
> </form></td></tr></table>
> </div>
> <div id="content" style="background-color:gray;height:10000px;width:10000;float:left;">
> <canvas id="myCanvas" width="9800" height="9800">Your browser does not support the HTML5 canvas tag.</canvas>
> </div>
> <div id="footer" style="background-color:royalblue;clear:both;text-align:left;">
> Copyright © Jonas Thörnvall <font color="gold" size="1">jonas.thornvall@hotmail.com
> </div>
> </body>
> </html>
>
> <script type="text/javascript">
> // GLOBAL VARIABLES
>
> var refresh = 5;
> var timer = 5;
>
> //Get X,Y cordinates mouse position
> function getPosition(canvas, evt) {
>          var rect = canvas.getBoundingClientRect();
>          return {
>            x: evt.clientX - rect.left,
>            y: evt.clientY - rect.top
>          };
> }
>
> // Onload
> function scriptload()
> {
>     canvas = document.getElementById("myCanvas");
>     ctx = canvas.getContext("2d");
>     initscript();
>     listeners();
>     startanime();
> }
>
> //Listenters logic
> function listeners(){
> myCanvas.addEventListener("mouseup", function(evt){
>          mouseUp = getPosition(canvas, evt);
>          message = 'Mouse up: ' + mouseUp.x + ',' + mouseUp.y;
>         }, false);
> myCanvas.addEventListener("mousedown", function(evt){
>          mouseDown = getPosition(canvas, evt);
>          message = 'Mouse down: ' + mouseDown.x + ',' + mouseDown.y;
>         }, false);
> myCanvas.addEventListener('mousemove', function(evt) {
>         mousePos = getPosition(canvas, evt);
>         message = 'Mouse position: ' + mousePos.x + ',' + mousePos.y;
>         }, false);
> }
>
>
>
> //Initiate values
> function initscript()
> {
> hold=false;
> message="";
> mousePos = [0,0];
> mouseDown = [0,0];
> mouseUp=[0,0]
> SQwidth=20,SQheigth=20,SQposX=200,SQposY=200;
> }
>
> //Paint logic
> function redraw()
> {
>             //Clear canvas
>             ctx.clearRect(0, 0, canvas.width, canvas.height);
>             listener_logic();
>             //Redraw canvas
>             paint_out(canvas,message);
> }
>
> //How program behave on mouse click, drag, drop
> function listener_logic(){
> if (mouseDown.x>=SQposX && mouseDown.x<=(SQposX+SQwidth) && mouseDown.y>=SQposY && mouseDown.y<=(SQposY+SQwidth)){
> message = 'Got it:' + mousePos.x + ',' + mousePos.y;
> hold=true;
>
> } else if  (mouseUp.x>=SQposX && mouseUp.x<=(SQposX+SQwidth) && mouseUp.y>=SQposY && mouseUp.y<=(SQposY+SQwidth)){
> message = 'Released it:' + mousePos.x + ',' + mousePos.y;
> hold=false
> }
> }
> //Paint out and redraw stuff on canvas
> function paint_out(canvas, message)
> {
>     if (hold==true){SQposX=mousePos.x-10;SQposY=mousePos.y-10;  }
>     ctx.font = '18pt Calibri';
>     ctx.fillStyle = 'black';
>     ctx.fillText(message, 10, 25);
>     ctx.fillStyle = "#FF0000";
>     ctx.fillRect(SQposX,SQposY,SQwidth,SQheigth);
> }
>
> //Start animation "form"
> function startanime()
> {
>     refresh = setInterval(redraw, 150);
> }
>
> //Stop animation "form"
> function stopanime()
> {
>     clearInterval(refresh);
> }
> </script>
>

I am sorry but I lack the time to really go over this in detail. But at 
first glance it seems your approach is what I described last: you have a 
canvas object and draw your own rectangles on it.

The only object that is managed by your execution context (the curent 
HTML page inside the browser, in this case) is that canvas. It offers 
primitives for drawing on its surface and for listening to events like 
mouse events and keyboard events. The only one who understands your 
rectangles is you. So you have to explicitly draw them on the canvas and 
you have to translate mouse events on the canvas to an interpretation 
involving your rectangles. Which is a perfectly plausible approach. You 
could extend that into rectangles supporting mouse event listeners on 
their own but you would have to implement that logic yourself.

[toc] | [prev] | [standalone]

Page 2 of 2 — ← Prev page 1 [2]

csiph-web

Javasscript event handling upon objects.

Contents

#29666

#29667