Re: Javasscript event handling upon objects.

Newsgroups	comp.lang.javascript
Date	2016-02-22 10:29 -0800
References	<54796993-a97d-4a7b-abfe-868c1cd210fa@googlegroups.com> <naf89q$8u7$1@dont-email.me> <95c5cbbe-81a5-4af7-9bbc-9cfd53d159a2@googlegroups.com> <56cb2da6$0$24090$e4fe514c@news.xs4all.nl>
Message-ID	<9be378eb-e456-4ed8-a204-f6aa69c5d062@googlegroups.com> (permalink)
Subject	Re: Javasscript event handling upon objects.
From	jonas.thornvall@gmail.com

Show all headers | View raw

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>

Thread

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

csiph-web