单击对象内的区域时如何执行函数？(How to execute a function when clicking an area inside an object?)

我使用DOM-Elements创建了一个带有地图区域的对象。现在我想在单击某个区域（坐标）时执行一个函数。我想我也需要检查该区域是否被点击？另外我觉得我在DOM-Element上缺少一些东西。

I created an object with map Areas by using DOM-Elements. Now I want to execute a function when clicked on an area(coordinates). I think I also Need to check the area if it is clicked or not ? Also I think I'm missing something on the DOM-Element.

最满意答案

查看我添加到您的代码中的评论;）

var _images = { //Object-MapArea
  start: {
    path: 'start.jpg',
    areas: [{
      coords: '18,131,113,140',
      text: 'Homepage',
      clickHandler: doSomething // I changed the name to avoid confusion but you can keep onclick 
    }]
  },
}

// ..... there is more code not shown here
//Creating DOM-Elements
var areaElem = document.createElement('AREA');

// Set attributes
areaElem.coords = area.coords;
areaElem.setAttribute('link', area.goto);
areaElem.setAttribute("title", area.text);
areaElem.setAttribute("shape", "rect");

// Add a listener on click event (using the function you defined in the area object above)
areaElem.addEventListener('click', area.clickHandler);

// Add your other click handler
areaElem.addEventListener('click', onArea_click);

_map.appendChild(areaElem);


function doSomething(e) {
  // Get the area clicked
  var areaClicked = e.target;

  // I dont understand the following code...
  var r = confirm("Data will get lost!");
  if (r == true) {
    window.open("homepage.html", "_parent");
  } else {
    window.open(" ", "_parent"); // here I want to stay in the current pictures. I mean the current object map area. But how can I refer to it so it stays there ?  
  }

} 
  
 
 
 希望能帮助到你 ;） 
See the comments I added to your code ;) 
 
 
  
  var _images = { //Object-MapArea
  start: {
    path: 'start.jpg',
    areas: [{
      coords: '18,131,113,140',
      text: 'Homepage',
      clickHandler: doSomething // I changed the name to avoid confusion but you can keep onclick 
    }]
  },
}

// ..... there is more code not shown here
//Creating DOM-Elements
var areaElem = document.createElement('AREA');

// Set attributes
areaElem.coords = area.coords;
areaElem.setAttribute('link', area.goto);
areaElem.setAttribute("title", area.text);
areaElem.setAttribute("shape", "rect");

// Add a listener on click event (using the function you defined in the area object above)
areaElem.addEventListener('click', area.clickHandler);

// Add your other click handler
areaElem.addEventListener('click', onArea_click);

_map.appendChild(areaElem);


function doSomething(e) {
  // Get the area clicked
  var areaClicked = e.target;

  // I dont understand the following code...
  var r = confirm("Data will get lost!");
  if (r == true) {
    window.open("homepage.html", "_parent");
  } else {
    window.open(" ", "_parent"); // here I want to stay in the current pictures. I mean the current object map area. But how can I refer to it so it stays there ?  
  }

} 
  
 
 
Hope it helps ;)

更多推荐