オブジェクト内の領域をクリックするときに関数を実行する方法は？

Question

DOM-Elementsを使用してマップエリアを持つオブジェクトを作成しました。今は、ある領域（座標）をクリックすると関数を実行したいと思います。私はまた、それがクリックされているかどうかを確認する必要があると思いますか？また、私はDOM要素に何かがないと思う。

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

は、私はあなたのコードに追加されたコメントを参照してください。）

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

 
}

はそれがお役に立てば幸いです。）

Answer 2

は、私はそれがクリックされたか、あなたは要素areaElemを作成し、同じDOMにイベントをアタッチされているわけではない

場合、私はまた、エリアをチェックする必要があると思います。 だからあなたが同じ要素上と同じイベントのために、両方のonclick & 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 

}