[Inkscape-user] When to use onclick(evt) and when to use onclick(event)?

Discussion:

Steve Litt

2017-04-25 01:34:55 UTC

Hi all,

Within a <svg> element in my HTML body, I can use onclick(evt), as
exemplified below:

============================================================
<svg width="500px" viewBox="0 15 80 30">
<circle id=circ1 r="6" cx="10" cy="30" onclick="top.doit(evt)" />
</svg>
============================================================

I can change the "evt" to "event" and it still works, but if I change
it to anything else, for example "e", it fails. Is evt some kind of
reserved word within SVG?

By the way, if an item in HTML itself (like a paragraph) has an
onclick, you need to remove the "top." and only "event" will work.

I have the rudiments of a clickable map using SVG, CSS and Javascript,
and am starting to build it into something useful.

Thanks,

SteveT

Steve Litt
April 2017 featured book: Troubleshooting Techniques
of the Successful Technologist
http://www.troubleshooters.com/techniques

C R

2017-04-25 08:01:28 UTC

Permalink

Can you post your svg?
It seems to me if evt were a reserved word it would fail, not succeed. :)

Most references I found indicate you can pass anything as an event
storage variable, and i doubt "e" is a reserved word.
If you could post a link to your html+svg file, we can probably advise better.

-C

Post by Steve Litt
Hi all,
Within a <svg> element in my HTML body, I can use onclick(evt), as
============================================================
<svg width="500px" viewBox="0 15 80 30">
<circle id=circ1 r="6" cx="10" cy="30" onclick="top.doit(evt)" />
</svg>
============================================================
I can change the "evt" to "event" and it still works, but if I change
it to anything else, for example "e", it fails. Is evt some kind of
reserved word within SVG?
By the way, if an item in HTML itself (like a paragraph) has an
onclick, you need to remove the "top." and only "event" will work.
I have the rudiments of a clickable map using SVG, CSS and Javascript,
and am starting to build it into something useful.
Thanks,
SteveT
Steve Litt
April 2017 featured book: Troubleshooting Techniques
of the Successful Technologist
http://www.troubleshooters.com/techniques
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user

Steve Litt

2017-04-25 09:06:33 UTC

Permalink

Thanks C R.

I've posted it at
http://troubleshooters.com/codecorn/clickmap/hello1.htm, which is a
working but very rudimentary clickable map.

Each circle has an onclick, onmouseover, and onmouseout event, all
three of which, each of which calls a javascript function in the
<html><head> (via the top. construct, which apparently is used within
the <svg> to reach out to the containing <html>.

Anyway, each of those functions in the events for the circles uses an
argument called "evt". If you change "evt" to "event" it works
identically. But if you change it to almost anything else, the web page
fails, and if you look at it in Chromium's debugging environment, your
clicks produce "ev is not defined" if you'd used "ev" as that argument.

SteveT

On Tue, 25 Apr 2017 09:01:28 +0100

Post by C R
Can you post your svg?
It seems to me if evt were a reserved word it would fail, not
succeed. :)
Most references I found indicate you can pass anything as an event
storage variable, and i doubt "e" is a reserved word.
If you could post a link to your html+svg file, we can probably advise better.
-C
On Tue, Apr 25, 2017 at 2:34 AM, Steve Litt

Post by Steve Litt
Hi all,
Within a <svg> element in my HTML body, I can use onclick(evt), as
============================================================
<svg width="500px" viewBox="0 15 80 30">
<circle id=circ1 r="6" cx="10" cy="30" onclick="top.doit(evt)" />
</svg>
============================================================
I can change the "evt" to "event" and it still works, but if I
change it to anything else, for example "e", it fails. Is evt some
kind of reserved word within SVG?
By the way, if an item in HTML itself (like a paragraph) has an
onclick, you need to remove the "top." and only "event" will work.
I have the rudiments of a clickable map using SVG, CSS and
Javascript, and am starting to build it into something useful.
Thanks,
SteveT
Steve Litt
April 2017 featured book: Troubleshooting Techniques
of the Successful Technologist
http://www.troubleshooters.com/techniques
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user

------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user

C R

2017-04-25 12:50:38 UTC

Permalink

Okay, so no amount of dicking around with replacing variables,
reconstructiong even objects, etc was working. Then I stumbles upon
this for why "event" must be "event" for in-line variables:
http://stackoverflow.com/questions/11265869/how-does-javascript-recogize-event-object-variables

Far from a satisfying situation. :)

I'd assume evt is the same sort of thing.
The real problem is your script will not work at all as is in IE,
which apparently uses a global event object (window.event).
So if you want to support IE, you'll have to check for the presence of
window.event, then assign the object to evt or event to pass it
through your functions.

Don't know if that info helps what you're trying to do, but it seems
to at least be the ugly truth. :)

I guess it could be worse. You could be required to construct a global
event handler from scratch. Anyway, do let me know if you find
something more useful. Now I'm curious about alternative event handler
code.

-C

Post by Steve Litt
Thanks C R.
I've posted it at
http://troubleshooters.com/codecorn/clickmap/hello1.htm, which is a
working but very rudimentary clickable map.
Each circle has an onclick, onmouseover, and onmouseout event, all
three of which, each of which calls a javascript function in the
<html><head> (via the top. construct, which apparently is used within
the <svg> to reach out to the containing <html>.
Anyway, each of those functions in the events for the circles uses an
argument called "evt". If you change "evt" to "event" it works
identically. But if you change it to almost anything else, the web page
fails, and if you look at it in Chromium's debugging environment, your
clicks produce "ev is not defined" if you'd used "ev" as that argument.
SteveT
On Tue, 25 Apr 2017 09:01:28 +0100

Post by Steve Litt
Hi all,
Within a <svg> element in my HTML body, I can use onclick(evt), as
============================================================
<svg width="500px" viewBox="0 15 80 30">
<circle id=circ1 r="6" cx="10" cy="30" onclick="top.doit(evt)" />
</svg>
============================================================
I can change the "evt" to "event" and it still works, but if I
change it to anything else, for example "e", it fails. Is evt some
kind of reserved word within SVG?
By the way, if an item in HTML itself (like a paragraph) has an
onclick, you need to remove the "top." and only "event" will work.
I have the rudiments of a clickable map using SVG, CSS and
Javascript, and am starting to build it into something useful.
Thanks,
SteveT
Steve Litt
April 2017 featured book: Troubleshooting Techniques
of the Successful Technologist
http://www.troubleshooters.com/techniques
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user

alvinpenner

2017-04-25 13:18:50 UTC

Permalink

thanks for the links to stackoverflow

Post by C R
The real problem is your script will not work at all as is in IE,

C R

2017-04-25 16:22:08 UTC

Permalink

Okay, so you may be safer with the new improved IE. Took them long enough. :)
-C

Post by alvinpenner
thanks for the links to stackoverflow

Post by C R
The real problem is your script will not work at all as is in IE,

as far as I can tell, this script is working properly, as is, in Windows 10,
IE11
Alvin
--
View this message in context: http://inkscape.13.x6.nabble.com/When-to-use-onclick-evt-and-when-to-use-onclick-event-tp4979526p4979531.html
Sent from the Inkscape - User mailing list archive at Nabble.com.
------------------------------------------------------------------------------
Check out the vibrant tech community on one of the world's most
engaging tech sites, Slashdot.org! http://sdm.link/slashdot
_______________________________________________
Inkscape-user mailing list
https://lists.sourceforge.net/lists/listinfo/inkscape-user

Steve Litt

2017-04-25 23:58:53 UTC

Permalink

On Tue, 25 Apr 2017 13:50:38 +0100

Post by C R
Okay, so no amount of dicking around with replacing variables,
reconstructiong even objects, etc was working. Then I stumbles upon
http://stackoverflow.com/questions/11265869/how-does-javascript-recogize-event-object-variables
Far from a satisfying situation. :)

Good. I'm not crazy.

Post by C R
I'd assume evt is the same sort of thing.

Yes. It sounds to me like there are objects called "event" and "evt" in
the namespace native to some or all of the DOM objects, and those
objects are your only choice for the first arg to onclick etc.

Post by C R
The real problem is your script will not work at all as is in IE,
which apparently uses a global event object (window.event).
So if you want to support IE, you'll have to check for the presence of
window.event, then assign the object to evt or event to pass it
through your functions.

Thanks. That's a pretty clean solution. In a later email alvinpinner
said my map appears to work in the IE browser in Win10, so I might not
need to do that, but if I do, it should be easy enough.

Post by C R
Don't know if that info helps what you're trying to do, but it seems
to at least be the ugly truth. :)

Most software has some ugly truths, and if it's basically good, I just
say "OK, I'll play your silly game" and often also document it on
Troubleshooters.Com. My main concern was that perhaps I was missing
something. Apparently I'm not.

Post by C R
I guess it could be worse. You could be required to construct a global
event handler from scratch. Anyway, do let me know if you find
something more useful. Now I'm curious about alternative event handler
code.

Now that I know this is a known situation, I'm just going to use evt or
event and go on to the next challenge. Things get trickier when you try
to have the <svg> element imported with an <img> or <object> node. And
then there's the fact that if you build the <svg> with Inkscape, you
need to be very careful about certain things, especially you need to
have the origin of your drawing be 0,0, especially if you intend to
"crop" your file (from A4 or Letter or whatever).

AND, I need to see how far I can go inside Inkscape with this stuff. I
already know that using Object Properties Shift+Ctrl+O I can change the
ID and label of the object, and using the Interactivity dropdown on the
Object Properties screen I can, at least to some degree, set the
various event handlers. Perhaps I can go deeper still.

Thanks,

SteveT

Steve Litt
April 2017 featured book: Troubleshooting Techniques
of the Successful Technologist
http://www.troubleshooters.com/techniques