When to use onclick(evt) and when to use onclick(event)?
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
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 <slitt@...2357...> wrote:
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
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 Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
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 C R <cajhne@...155...> wrote:
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 <slitt@...2357...> wrote:
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
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 Inkscape-user@lists.sourceforge.net 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 Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
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-eve...
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
On Tue, Apr 25, 2017 at 10:06 AM, Steve Litt <slitt@...2357...> wrote:
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 C R <cajhne@...155...> wrote:
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 <slitt@...2357...> wrote:
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
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 Inkscape-user@lists.sourceforge.net 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 Inkscape-user@lists.sourceforge.net 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 Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
thanks for the links to stackoverflow
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-onc... Sent from the Inkscape - User mailing list archive at Nabble.com.
Okay, so you may be safer with the new improved IE. Took them long enough. :) -C
On Tue, Apr 25, 2017 at 2:18 PM, alvinpenner <penner@...2467...> wrote:
thanks for the links to stackoverflow
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-onc... 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 Inkscape-user@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/inkscape-user
On Tue, 25 Apr 2017 13:50:38 +0100 C R <cajhne@...155...> wrote:
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-eve...
Far from a satisfying situation. :)
Good. I'm not crazy.
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.
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.
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.
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
participants (3)
-
alvinpenner -
C R -
Steve Litt