javascript - 如何使画布的一部分可点击？

Question

我想要做的是使画布的一部分可点击。当我单击它时，会调用一个函数。你如何在 JavaScript 中做到这一点？

Answer 1

如果您只想使画布的某个区域可点击，那么一种简单的方法是在画布顶部覆盖一个不可见的 div。

CSS：

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

这是一个示例，您可以单击画布的左上角。 http://jsfiddle.net/tsanders/V6qGM/38/

Answer 2

您必须将点击事件绑定到整个画布并检测光标在点击时的位置，然后，如果光标在特定尺寸内，则执行该功能。

这是一个小提琴，以 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();
        }
    });
}