Как сделать часть холста кликабельным?

Question

Что я хочу сделать, так это сделать часть холста кликабельным. И когда я нажимаю на нее, вызывается функция. Как вы это делаете в JavaScript?

Answer 1

Вам необходимо привязать событие клика ко всему холсту и определить положение курсора на клике, а затем, если курсор находится в определенных размерах, вы выполняете функцию.

Вот скрипка, используя DIV в качестве примера: http://jsfiddle.net/R8rED/17/

function testAndExecute(elem, event, area, func){ 
    // area is relative to page : 
    // var area = { 
    //  x0: 60, 
    //  y0: 60, 
    //  x1: 100, 
    //  y1: 100 
    // }  
    elem.addEventListener(event, function(e){ 
     var page = { 
      x: e.pageX, 
      y: e.pageY 
     } 
     if(page.x >= area.x0 && page.x <= area.x1 && page.y >= area.y0 && page.y <= area.y1){ 
      func(); 
     } 
    }); 
} 

Answer 2

Если вы просто хотите, чтобы область холста Clickable, простой способ сделать это будет накладывать невидимый DIV поверх холста.

CSS:

#clickable-overlay { 
    position: absolute; 
    opacity: 0; 
} 

Вот пример, где вы можете нажать кнопку в верхнем левом углу холста. http://jsfiddle.net/tsanders/V6qGM/38/