Javascript 触发事件以调用函数'；它在一个封闭的内部

我正在做一个基于他人下载和修改的项目。我们需要允许用户单击页面上其他位置的按钮（不是画布的一部分），并让它运行示例应用程序附带的功能。但是，该函数位于闭包内部。由于我不能直接调用该函数（对吗？闭包阻止了这一点？我不经常使用闭包），我想我可以通过在用户单击的位置触发鼠标事件来完成这一点。它不起作用了，我不知道为什么不起作用

我在上发布了一个大大简化的版本。简单HTML代码：

<div id="canvasDiv"></div>
<div id="buttonDiv">
  <button>why can't I send a click to the canvas?</button>
</div>

---

正如您通过运行小提琴所看到的，如果您在框内单击，您将收到一个通知，通知您单击的位置。但是如果你点击这个按钮，你不会得到警告。在写这个问题的时候，我突然想到jQuery的

.trigger

方法不足以发送点击。它的文档页面特别指出，

.trigger

“不能完美地复制自然发生的事件”。我们欢迎不涉及jQuery的解决方案。

您可以定义一个变量

var press在
WM
之外，在
WM
之内，在
按下
之前移除
var
并设置
press=function（）{}
。然后，单击
按钮

var press;




//基于http://www.williammalone.com/projects/html5-canvas-javascript-drawing-app-with-bucket-tool/
var出版社；
var WM={}；
WM.drawingApp=功能（选项）{
“严格使用”；
变量画布、上下文、，
//将鼠标和触摸事件侦听器添加到画布
createUserEvents=函数（）{
var getElementPos=函数（元素）{
var-parentOffset，pos；
if（！元素）{
pos={
x:0,，
y:0
};
}否则{
pos={
x:element.offsetLeft，
y:element.offsetTop
};
if（元素offsetParent）{
parentOffset=getElementPos（element.offsetParent）；
pos.x+=parentOffset.x；
位置y+=父偏移量y；
}
}
返回pos；
};
按下=功能（e）{
控制台日志（e）
//鼠标下键位置
var SIZEHOTSPOTTSTARTX，工具索引，
mouseX=（e.changedTouches？e.changedTouches[0]。pageX:e.pageX），
mouseY=（e.changedTouches？e.changedTouches[0]。pageY:e.pageY）；
var elementPos=getElementPos（document.getElementById（options.canvasElementId | | canvasDiv'）；
mouseX-=元件位置x；
鼠标-=元件位置y；
宣布（mouseX，mouseY）；
};
var announce=函数（x，y）{alert（'press at:'+x+'，'+y）；}
//将鼠标事件侦听器添加到画布元素
canvas.addEventListener（“鼠标向下”，按，假）；
},
//第一次创建画布元素、加载图像、添加事件并绘制画布。
init=函数（）{
//创建画布（IE所必需的，因为它不知道画布元素是什么）
canvas=document.createElement（'canvas'）；
canvas.setAttribute（'width'，100）；
canvas.setAttribute（'height'，100）；
setAttribute（'id'，'canvas'）；
document.getElementById（options.canvasElementId | | |“canvasDiv”）.appendChild（canvas）；
context=canvas.getContext（“2d”）；//获取2d画布上下文
createUserEvents（）；
};
init（）；
返回{}；
};
jQuery（文档）.ready（函数（）{
jQuery（'#buttonDiv'）。在（'click'，'button'，function（）上{
var down=jQuery.Event（“mousedown”{
第十页：50，
页码：50
});
按下（向下）
//jQuery（'#canvasDiv canvas'）.trigger（向下）；
});
});
var drawingApp=WM.drawingApp({
canvasElementId:“canvasDiv”
});
#canvasDiv canvas{
边框：纯黑1px；
}

为什么我不能点击画布？
您可以定义变量
var-press在
WM
之外，在
WM
之内，在
按下
之前移除
var
并设置
press=function（）{}
。然后，单击
按钮

var press;




//基于http://www.williammalone.com/projects/html5-canvas-javascript-drawing-app-with-bucket-tool/
var出版社；
var WM={}；
WM.drawingApp=功能（选项）{
“严格使用”；
变量画布、上下文、，
//将鼠标和触摸事件侦听器添加到画布
createUserEvents=函数（）{
var getElementPos=函数（元素）{
var-parentOffset，pos；
if（！元素）{
pos={
x:0,，
y:0
};
}否则{
pos={
x:element.offsetLeft，
y:element.offsetTop
};
if（元素offsetParent）{
parentOffset=getElementPos（element.offsetParent）；
pos.x+=parentOffset.x；
位置y+=父偏移量y；
}
}
返回pos；
};
按下=功能（e）{
控制台日志（e）
//鼠标下键位置
var SIZEHOTSPOTTSTARTX，工具索引，
mouseX=（e.changedTouches？e.changedTouches[0]。pageX:e.pageX），
mouseY=（e.changedTouches？e.changedTouches[0]。pageY:e.pageY）；
var elementPos=getElementPos（document.getElementById（options.canvasElementId | | canvasDiv'）；
mouseX-=元件位置x；
鼠标-=元件位置y；
宣布（mouseX，mouseY）；
};
var announce=函数（x，y）{alert（'press at:'+x+'，'+y）；}
//将鼠标事件侦听器添加到画布元素
canvas.addEventListener（“鼠标向下”，按，假）；
},
//第一次创建画布元素、加载图像、添加事件并绘制画布。
press = function(e) {
          console.log(e);
          // Mouse down location
          var sizeHotspotStartX, toolIndex,
          mouseX = (e.changedTouches ? e.changedTouches[0].pageX : e.pageX),
          mouseY = (e.changedTouches ? e.changedTouches[0].pageY : e.pageY);

          var elementPos = getElementPos(
            document.getElementById(options.canvasElementId 
            || 'canvasDiv')
          );
          mouseX -= elementPos.x;
          mouseY -= elementPos.y;
          announce(mouseX, mouseY);
        };

jQuery(document).ready(function() {
  jQuery('#buttonDiv').on('click', 'button', function() {
    var down = jQuery.Event("mousedown", {
      pageX: 50,
      pageY: 50
    });
    press(down); // call `press` at `button` click
    //jQuery('#canvasDiv canvas').trigger(down);
  });
});