javascript - 触发事件来调用闭包内的函数

Question

我正在开发一个基于一个漂亮的小sample canvas drawing app的项目该项目的其他人下载并修改了。我们需要允许用户单击页面上其他位置(不是 Canvas 的一部分)的按钮，并让它运行示例应用程序附带的函数。但是，该函数位于闭包内部。由于我无法直接调用该函数(对吗？闭包可以防止这种情况发生？我不经常使用闭包)，我想我可以通过在用户单击的位置触发鼠标事件来完成此操作完成同样的事情。它不起作用，我不知道为什么不起作用。

我在 this fiddle 发布了一个大大简化的版本。简单的 HTML 代码:

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

以及下载的示例应用程序的简化版本，加上我尝试使用 jQuery 的 .trigger 方法来触发事件:

var WM = {};

WM.drawingApp = function(options) {
  "use strict";
  var canvas, context,
    // Add mouse and touch event listeners to the canvas
    createUserEvents = function() {
      var getElementPos = function(element) {
        // straight-forward stuff removed for brevity's sake
        return pos;
      };
      var press = function(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);
      };
      var announce = function(x,y) { alert('press at: ' + x + ', ' + y); }
      // Add mouse event listeners to canvas element
      canvas.addEventListener("mousedown", press, false);
    },
    // Creates a canvas element, etc
    init = function() {
      // Create the canvas 
      canvas = document.createElement('canvas');
      canvas.setAttribute('width', 100);
      canvas.setAttribute('height', 100);
      canvas.setAttribute('id', 'canvas');
      document.getElementById(options.canvasElementId || 'canvasDiv').appendChild(canvas);
      context = canvas.getContext("2d"); // Grab the 2d canvas context
      createUserEvents();
    };
  init();
  return {};
};

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

正如您通过运行 fiddle 所看到的，如果您在框内单击，您会收到一条警报，告知您单击的位置。但如果您单击该按钮，您不会收到警报。在写这个问题时，我想到也许 jQuery 的 .trigger 方法不足以发送点击。它的文档页面特别指出 .trigger “不能完美地复制自然发生的事件”。我们对不涉及 jQuery 的解决方案持开放态度。

Answer 1

您可以在WM外部、WM内部定义变量var press;，删除之前的var press 并设置 press = function() {}。然后，您应该能够在单击按钮

时调用 press(down)

var press;

<小时/>

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);
  });
});

// based on http://www.williammalone.com/projects/html5-canvas-javascript-drawing-app-with-bucket-tool/

var press;

var WM = {};

WM.drawingApp = function(options) {
  "use strict";
  var canvas, context,
    // Add mouse and touch event listeners to the canvas
    createUserEvents = function() {
      var getElementPos = function(element) {
        var parentOffset, pos;
        if (!element) {
          pos = {
            x: 0,
            y: 0
          };
        } else {
          pos = {
            x: element.offsetLeft,
            y: element.offsetTop
          };
          if (element.offsetParent) {
            parentOffset = getElementPos(element.offsetParent);
            pos.x += parentOffset.x;
            pos.y += parentOffset.y;
          }
        }
        return pos;
      };
      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);
      };
      var announce = function(x,y) { alert('press at: ' + x + ', ' + y); }
      // Add mouse event listeners to canvas element
      canvas.addEventListener("mousedown", press, false);
    },
    // Creates a canvas element, loads images, adds events, and draws the canvas for the first time.
    init = function() {
      // Create the canvas (Neccessary for IE because it doesn't know what a canvas element is)
      canvas = document.createElement('canvas');
      canvas.setAttribute('width', 100);
      canvas.setAttribute('height', 100);
      canvas.setAttribute('id', 'canvas');
      document.getElementById(options.canvasElementId || 'canvasDiv').appendChild(canvas);
      context = canvas.getContext("2d"); // Grab the 2d canvas context
      createUserEvents();
    };
  init();
  return {};
};

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

var drawingApp = WM.drawingApp({
  canvasElementId: "canvasDiv"
});

 #canvasDiv canvas {
   border: solid black 1px;
 }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<div id="canvasDiv"></div>
<div id="buttonDiv">
  <button>why can't I send a click to the canvas?</button>
</div>

jsfiddle https://jsfiddle.net/gkvdha3h/5/