Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #37639

Re: Where does it make sense to put the mouseOver "canvas" mouseOut "canvas"

Show all headers | View raw

=?UTF-8?Q?Jonas_Th=C3=B6rnvall?= <jonas.thornvall@gmail.com> wrote on 29
Oct 2019 in comp.lang.javascript: 

> Den tisdag 29 oktober 2019 kl. 10:43:08 UTC+1 skrev Evertjan.:
>> jonas.thornvall wrote on 29 Oct 2019 in comp.lang.javascript: 
>> 
>> > I am just starting with a visual editor for notes, but the whole
>> > thing with where to put things in event drive code is very fuzzy for
>> > me. The first thing i want to do is check if mouse in over the editor
>> > canvas because then i start "the click listeners on regions". 
>> > 
>> > The only thing i can come up with is to put it directly when canvas
>> > loaded. Does it make sense?
>> > 
>> > function main_canvas_init() {
>> >   mainCanvas = document.getElementById("maincanvas");
>> >   ctm = mainCanvas.getContext("2d");
>> >   ctm.font = "12px Arial";
>> >   mget_canvas_res();     
>> >   mset_canvas_resolution();
>> >   mainCanvas.addEventListener("mouseover", function(evt) {
>> >      startMouseListener();
>> >      //alert("mouse in");
>> >   }, false);
>> >   mainCanvas.addEventListener("mouseout", function(evt) {
>> >      stopMouseListener();
>> >      //alert("mouse out");               
>> >   }, false);
>> >}
>> > 
>> 
>> You can always add it later, I trust:
>> 
>> document.getElementById("maincanvas").addEventListener("mouseout"...
>> 
>> =========
>> 
>> To avoid confusion with globals or semi-globals, 
>> use 'let' and 'const' for local variables in functions.
>> 
>> Learn to use .querySelector() and .querySelectorAll().
>> 
>> Handy shortcuts:
>> 
>> const qs = (selector,context) => 
>>    (context || document).querySelector(selector);
>> 
>> const qsa = (selector,context) => 
>>    Array.from((context || document).querySelectorAll(selector));
>> 
>> So you could write:
>> 
>> qs("#maincanvas").addEventListener("mouseout" ...
>> 
>> or referencing the 4th instance of a class:
>> 
>> qsa(".canvases")[3].addEventListener("mouseout" ...
>> 
> 
> This is probably an idiotic question but

Why do you demean yourself by stating a q is idiotic?
Omitting that is not hubris.

> why is the listener on 
>   mainCanvas = document.getElementById("maincanvas");
> and not on
>   ctm = mainCanvas.getContext("2d");
> 
> Why is the listener attached to mainCanvas and not to ctm? Is it
> somedthing with the HTML dom holding the listener? 

[1] Probably because that is your code.

[2] [I prefer svg to canvas,]
    is that ctm [pointing to] a DOM-object?

<https://developer.mozilla.org/en-
US/docs/Web/API/HTMLCanvasElement/getContext>

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Back to comp.lang.javascript | Previous | Next — Previous in thread | Next in thread | Find similar | Unroll thread

Thread

Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-10-29 02:18 -0700
  Re: Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-10-29 10:42 +0100
    Re: Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-10-29 03:07 -0700
      Re: Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-10-29 11:32 +0100
        Re: Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-10-29 06:10 -0700
          Re: Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-10-29 23:11 +0100
            Re: Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-10-29 23:18 -0700
              Re: Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" luserdroog <luser.droog@gmail.com> - 2019-10-30 00:10 -0700
                Re: Where does it make sense to put the mouseOver "canvas" mouseOut "canvas" Jonas Thörnvall <jonas.thornvall@gmail.com> - 2019-10-30 01:01 -0700

csiph-web