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

Groups > comp.lang.javascript > #15487 > unrolled thread

Getting event from map click

Back to article view | Back to comp.lang.javascript

Contents

  Getting event from map click Andrew Poulos <ap_prog@hotmail.com> - 2012-08-22 15:10 +1000
    Re: Getting event from map click Andrew Poulos <ap_prog@hotmail.com> - 2012-08-22 15:22 +1000
      Re: Getting event from map click Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-08-22 10:48 +0200
        Re: Getting event from map click Andrew Poulos <ap_prog@hotmail.com> - 2012-08-22 22:16 +1000
          Re: Getting event from map click Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-08-22 16:23 +0200
            Re: Getting event from map click Andrew Poulos <ap_prog@hotmail.com> - 2012-08-23 18:08 +1000
              Re: Getting event from map click Andrew Poulos <ap_prog@hotmail.com> - 2012-08-24 07:25 +1000
          Re: Getting event from map click SAM <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> - 2012-08-22 18:09 +0200
    Re: Getting event from map click Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2012-08-22 10:46 +0200

#15487 — Getting event from map click

I have some js like this

var myFunction = function(e, elem) {
  e = e || window.event;
  // do other stuff
};

and some HTML like this

<img id='tmp' src="lake.jpg" style="width:256px; height:192px;" 
usemap="#pnt">
<map name="pnt">
   <area shape="rect" coords="111,36,151,85" href="#" 
onclick="myFunction(e, 'tmp'); return false;">
</map>

I need the 'area' to pass the event to the function and some other 
parameters. When I try the above I get e is undefined. How do I get it 
to pass the event as well?

Andrew Poulos

[toc] | [next] | [standalone]

#15488

On 22/08/2012 3:10 PM, Andrew Poulos wrote:
> I have some js like this
>
> var myFunction = function(e, elem) {
>   e = e || window.event;
>   // do other stuff
> };
>
> and some HTML like this
>
> <img id='tmp' src="lake.jpg" style="width:256px; height:192px;"
> usemap="#pnt">
> <map name="pnt">
>    <area shape="rect" coords="111,36,151,85" href="#"
> onclick="myFunction(e, 'tmp'); return false;">
> </map>
>
> I need the 'area' to pass the event to the function and some other
> parameters. When I try the above I get e is undefined. How do I get it
> to pass the event as well?

Doh, I solved it.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#15493

Andrew Poulos wrote:

> On 22/08/2012 3:10 PM, Andrew Poulos wrote:
>> I have some js like this
>>
>> var myFunction = function(e, elem) {
>>   e = e || window.event;
>>   // do other stuff
>> };
>>
>> and some HTML like this
>>
>> <img id='tmp' src="lake.jpg" style="width:256px; height:192px;"
>> usemap="#pnt">
>> <map name="pnt">
>>    <area shape="rect" coords="111,36,151,85" href="#"
>> onclick="myFunction(e, 'tmp'); return false;">
>> </map>
>>
>> I need the 'area' to pass the event to the function and some other
>> parameters. When I try the above I get e is undefined. How do I get it
>> to pass the event as well?
> 
> Doh, I solved it.

Care to tell how?¹


PointedEars
___________
¹  There's a "stupid" question for you for a change.
-- 
When all you know is jQuery, every problem looks $(olvable).

[toc] | [prev] | [next] | [standalone]

#15497

On 22/08/2012 6:48 PM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> On 22/08/2012 3:10 PM, Andrew Poulos wrote:
>>> I have some js like this
>>>
>>> var myFunction = function(e, elem) {
>>>    e = e || window.event;
>>>    // do other stuff
>>> };
>>>
>>> and some HTML like this
>>>
>>> <img id='tmp' src="lake.jpg" style="width:256px; height:192px;"
>>> usemap="#pnt">
>>> <map name="pnt">
>>>     <area shape="rect" coords="111,36,151,85" href="#"
>>> onclick="myFunction(e, 'tmp'); return false;">
>>> </map>
>>>
>>> I need the 'area' to pass the event to the function and some other
>>> parameters. When I try the above I get e is undefined. How do I get it
>>> to pass the event as well?
>>
>> Doh, I solved it.
>
> Care to tell how?

Instead of 'e' I put 'event' as the parameter:

<area shape="rect" coords="111,36,151,85" href="#"
onclick="myFunction(event, 'tmp'); return false;">

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#15501

Andrew Poulos wrote:

> Instead of 'e' I put 'event' as the parameter:
> 
> <area shape="rect" coords="111,36,151,85" href="#"
> onclick="myFunction(event, 'tmp'); return false;">

I figured as much.  Keep in mind that although preliminary results point to 
ubiquity, AFAIK serious compatibility research regarding the `event' 
property (for example, as part of the DOM Support Matrix) is still pending.


PointedEars
-- 
Anyone who slaps a 'this page is best viewed with Browser X' label on
a Web page appears to be yearning for the bad old days, before the Web,
when you had very little chance of reading a document written on another
computer, another word processor, or another network. -- Tim Berners-Lee

[toc] | [prev] | [next] | [standalone]

#15509

On 23/08/2012 12:23 AM, Thomas 'PointedEars' Lahn wrote:
> Andrew Poulos wrote:
>
>> Instead of 'e' I put 'event' as the parameter:
>>
>> <area shape="rect" coords="111,36,151,85" href="#"
>> onclick="myFunction(event, 'tmp'); return false;">
>
> I figured as much.  Keep in mind that although preliminary results point to
> ubiquity, AFAIK serious compatibility research regarding the `event'
> property (for example, as part of the DOM Support Matrix) is still pending.

I'm on Windows and the browsers I've tested IE 6, 7, 8, and 9, Firefox 
14, Chrome 21, Opera 12, and Safari 5 all appear to support it. So, so 
far so good. I'm going to test it on mobile devices and I'll report back 
if there's an issue.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#15533

On 23/08/2012 6:08 PM, Andrew Poulos wrote:
> On 23/08/2012 12:23 AM, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>
>>> Instead of 'e' I put 'event' as the parameter:
>>>
>>> <area shape="rect" coords="111,36,151,85" href="#"
>>> onclick="myFunction(event, 'tmp'); return false;">
>>
>> I figured as much.  Keep in mind that although preliminary results
>> point to
>> ubiquity, AFAIK serious compatibility research regarding the `event'
>> property (for example, as part of the DOM Support Matrix) is still
>> pending.
>
> I'm on Windows and the browsers I've tested IE 6, 7, 8, and 9, Firefox
> 14, Chrome 21, Opera 12, and Safari 5 all appear to support it. So, so
> far so good. I'm going to test it on mobile devices and I'll report back
> if there's an issue.

It also works with Chrome on ICS, and Safari on iOS 5.1.1.

Andrew Poulos

[toc] | [prev] | [next] | [standalone]

#15502

Le 22/08/12 14:16, Andrew Poulos a écrit :
> On 22/08/2012 6:48 PM, Thomas 'PointedEars' Lahn wrote:
>> Andrew Poulos wrote:
>>
>>> On 22/08/2012 3:10 PM, Andrew Poulos wrote:
>>>> I have some js like this
>>>>
>>>> var myFunction = function(e, elem) {
>>>>    e = e || window.event;
>>>>    // do other stuff
>>>> };
>
> Instead of 'e' I put 'event' as the parameter:
>
> <area shape="rect" coords="111,36,151,85" href="#"
> onclick="myFunction(event, 'tmp'); return false;">


<img id='tmp' src="lake.jpg" alt="my image"
    usemap="#pnt" style="width:256px; height:192px;">
<map name="pnt">
   <area shape="rect" coords="111,36,151,85" href="#">
   <area shape="rect" coords="156,95,251,85" href="#">
</map>

<script type="text/javascript">
  function myFunction() {
    alert(this.coords);
    return false;
   }
  var m = document.getElementsByTagName('area'), n = m.length;
  while(n--) m[n].onclick = myFunction;
</script>


-- 
Stéphane Moriaux avec/with iMac-intel

[toc] | [prev] | [next] | [standalone]

#15492

Andrew Poulos wrote:

> I have some js like this
> 
> var myFunction = function(e, elem) {
>   e = e || window.event;
>   // do other stuff
> };

Do not do that.  `e' refers to a host object, and this is inefficient 
anyway.


PointedEars
-- 
When all you know is jQuery, every problem looks $(olvable).

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web