[Inkscape-user] Be careful making a group clickable

[Steve Litt]

Hi all,

My clickmap has several screw heads, each being a group consisting of a
circle, a path in the shape of a cross for a phillips screwdriver to go
into, and an elipse that acts as a highlight. Each screw head group has
an onclick event, and it fires just fine. But...

In the Javascript function that receives the onclick event, evt.target
is not the group, it's the individual geometry within the group that
got clicked. So depending on the exact position of the mouse when
clicking, it could be the circular head, the path of the cross, or the
elipse highlight. Why an onclick for the group returns a target that's
one of the group's items is beyond me. Here's how I dealt with it in
the HTML page:

function screwclick(e){
var parnt = e.target.parentElement;
var circle = parnt.getElementsByTagName("circle")[0];
circle.style.fill = "gold";
}

I found the parent of evt.target, then found the circle that was part
of that parent, and then colored the circle. Before I figured out how
to do that, sometimes the cross was turning gold, and sometimes the
highlight was turning gold. Now only the circle turns gold.

This could really fool a person who isn't looking for it.

SteveT

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

[Steve Litt]

I can no longer recommend my suggestions, of May 1, concerning how to
put an onclick on a group. It's doable, but messy.

What I'm now recommending is to include in the group a transparent
cover, in the shape of the entire group object, and that the
transparent cover be the only entity in the group to contain an
onclick, onmouseover, onmouseout, etc. MUCH more predictable and easy.

The only exception to the preceding recommendation is if you actually
want clicks on different parts of an object to do different things. A
rocker switch is a good example. But even then, the way I'd do it is to
have two transparent cover objects: one covering one pressible point on
the switch, and the other over the other pressable point.

I can no longer see any situation where putting events on the group as
a whole would be valuable.

Thanks,

SteveT

Steve Litt
May 2017 featured book: Twenty Eight Tales of Troubleshooting
http://www.troubleshooters.com/28




On Mon, 1 May 2017 01:41:55 -0400

Post by Steve Litt
Hi all,
My clickmap has several screw heads, each being a group consisting of
a circle, a path in the shape of a cross for a phillips screwdriver
to go into, and an elipse that acts as a highlight. Each screw head
group has an onclick event, and it fires just fine. But...
In the Javascript function that receives the onclick event, evt.target
is not the group, it's the individual geometry within the group that
got clicked. So depending on the exact position of the mouse when
clicking, it could be the circular head, the path of the cross, or the
elipse highlight. Why an onclick for the group returns a target that's
one of the group's items is beyond me. Here's how I dealt with it in
function screwclick(e){
var parnt = e.target.parentElement;
var circle = parnt.getElementsByTagName("circle")[0];
circle.style.fill = "gold";
}
I found the parent of evt.target, then found the circle that was part
of that parent, and then colored the circle. Before I figured out how
to do that, sometimes the cross was turning gold, and sometimes the
highlight was turning gold. Now only the circle turns gold.
This could really fool a person who isn't looking for it.
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