web-模拟鼠标事件

鼠标事件：

function mouseEvent(type, sx, sy, cx, cy) {
  var evt;
  var e = {
    bubbles: true,
    cancelable: (type != "mousemove"),
    view: window,
    detail: 0,
    screenX: sx, 
    screenY: sy,
    clientX: cx, 
    clientY: cy,
    ctrlKey: false,
    altKey: false,
    shiftKey: false,
    metaKey: false,
    button: 0,
    relatedTarget: undefined
  };
  if (typeof( document.createEvent ) == "function") {
    evt = document.createEvent("MouseEvents");
    evt.initMouseEvent(type, 
      e.bubbles, e.cancelable, e.view, e.detail,
      e.screenX, e.screenY, e.clientX, e.clientY,
      e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
      e.button, document.body.parentNode);
  } else if (document.createEventObject) {
    evt = document.createEventObject();
    for (prop in e) {
    evt[prop] = e[prop];
  }
    evt.button = { 0:1, 1:4, 2:2 }[evt.button] || evt.button;
  }
  return evt;
}

function dispatchEvent (el, evt) {
  if (el.dispatchEvent) {
    el.dispatchEvent(evt);
  } else if (el.fireEvent) {
    el.fireEvent('on' + type, evt);
  }
  return evt;
}

用例：

var canvas = document.getElementsByTagName("canvas")[0];
  	var pageX = canvas.offsetLeft + (315 / 414) * canvas.offsetWidth;
  	var pageY = canvas.offsetTop + (30 / 600) * canvas.offsetHeight;

  	var event = mouseEvent("mousedown", pageX, pageY, pageX, pageY);
  	dispatchEvent(canvas, event);

  	var event = mouseEvent("mouseup", pageX, pageY, pageX, pageY);
  	dispatchEvent(canvas, event);

jquery版本：

var $canvas = $("#c2canvas");
	var offset = $canvas.offset();
	var restartPageX = offset.left + 0.5 * $canvas.width();
	var restartPageY = offset.top + (408 / 435) * $canvas.height();

	var e1 = new jQuery.Event("mousedown");
	e1.pageX = restartPageX;
	e1.pageY = restartPageY;
	var e2 = new jQuery.Event("mouseup");
	e2.pageX = restartPageX;
	e2.pageY = restartPageY;
	$(document).trigger(e1).trigger(e2);