yahoo5000 yahoo5000 - 4 months ago 25
Javascript Question

Javascript onlick event to area

Hello guys i am trying to add onclick event trough javascript to my map element that was created trough javascript too , i am not going to paste whole code here but will make a short version .
so this what i have done so far :

var mapimg = createElement("img"); // create and set up img element for map
mapimg.src "some path ";
map.img.width = some with;
map.img.height = some height;
map.usemap = "#Map"; // img element done
var map = createElement("map"); // set map element and attributes for him
map.name = "Map";
map.id = "Map";
area(1-10) = createElement("area"); // creating a 10 areas
area.id = some;
area.shape = some;
area.coords = some; // area allement have same attributes but with different values
// ones i done with are append them to map and then append mapimg and map to body

// now trying to add on click event

map.addEventListener("onClick",function(){
var id = map.getElementById(this);
var img = "images/map/reg" + id + ".jpg";
mapimg.src = img;
});


map are working but onclick event are not working i have writed jquery version that works just fine with a html elements

$(document).ready(function() {
$('area').click(function() {
var title = $(this).attr('title');
var image = "images/map/reg" + title + ".jpg";
$('.mapimg').attr('src', image);
$('#loginsubmitbutton2').show();
$('input[name="village"]').attr('value', title);
})

});


this is a full script

Answer

Having multiple elements with an event listener for each one of them is inefficient. jQuery makes it easy by using $(document) as event.target (i.e. the element clicked, hovered, etc.). In plain JavaScript it's possible as well by adding the event listener on the ancestor of the multiple elements.

  1. addEventListener() to an element that contains the group of elements.
  2. event.preventDefault() if event.targets (i.e. the group of elements you want to click) default behavior is undesired (e.g. if e.target is an <a>nchor and you don't want it to jump to somewhere like it normally does).
  3. Set a conditional that will verify what is in the eventPhase* is an event.target and not the event.currentTarget*.
  4. After that important step, you do all of your intended tasks of your functions at this point.
  5. After your functions have completed their tasks, use event.stopPropagation() to stop the event from bubbling* so that no other events are triggered on anything else.

    * TD;LR for details on event methods and properties read: eventPhase, currentTarget, and Comparison of Event Targets

    Also, read this article about this particular technique.

The following Snippet demonstrates how you use one event listener on a <map> and assign each <area> as a unique event.target. To test it, simply click a planet, and the result will be the coordinates of the event.target and msg that the click event was triggered. Click anywhere that's not covered by a planet, and you get no result, that's the event.stopPropagation() working.

SNIPPET

var map = document.querySelector('map');

map.addEventListener("click", eventHandler, false);

function eventHandler(e) {
  e.preventDefault();
  if (e.target != e.currentTarget) {
    var clicked = e.target.coords;
    console.log('click event triggered at ' + clicked);
  }
  e.stopPropagation();
}
<img src="https://s-media-cache-ak0.pinimg.com/736x/80/f3/06/80f3061369194bef1e2025d9a382d1a2.jpg" usemap='#iMap'>
<map id="iMap" name="iMap">
  <area shape="circle" alt="" title="" coords="66,179,10" href="" target="" />
  <area shape="circle" alt="" title="" coords="198,141,13" href="" target="" />
  <area shape="circle" alt="" title="" coords="152,244,17" href="" target="" />
  <area shape="circle" alt="" title="" coords="107,124,17" href="" target="" />
  <area shape="circle" alt="" title="" coords="353,203,83" href="" target="" />
  <area shape="circle" alt="" title="" coords="438,235,29" href="" target="" />
  <area shape="circle" alt="" title="" coords="482,135,25" href="" target="" />
  <area shape="circle" alt="" title="" coords="499,271,6" href="" target="" />
  <area shape="circle" alt="" title="" coords="262,243,99" href="" target="" />
  <!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) -->
</map>

Comments