Question

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

var _images = { //Object-MapArea
    start: {
      path: 'start.jpg',
      areas: [{
        coords: '18,131,113,140',
        text: 'Homepage',
        onclick: doSomething, // ??? 

      }]
    },

  }
  // ..... 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");
areaElem.onclick = doSomething; ? ? ?
if (element.captureEvents) element.captureEvents(Event.CLICK); ? ? ?
areaElem.addEventListener('click', onArea_click);
_map.appendChild(areaElem);
function doSomething(e) {
  if (!e) var e = window.event
  e.target = ... ? ?



    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 ?  
  }

}

Answer 1

我想我也需要检查区域是否被点击

您正在创建元素areaElem并将事件附加到同一个dom。所以可能不需要再检查

您可能不需要同时添加onclick和＆amp; addEventListner在同一元素和同一事件上。 onclick函数或addEventListener足以处理事件。

areaElem.onclick = function(event){
// Rest of the code
// put an alert to validate if this function is responding onclick

}


areaElem.addEventListener('click', onArea_click);
function onArea_click(){
// Rest of the code

}

Answer 2

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

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 ?  
  }

}

希望它有所帮助;）

单击对象内的区域时如何执行函数？

2 个答案: