touchevent.js 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
  1. function touchHandler(event) {
  2. event.stopPropagation();
  3. var touches = event.changedTouches,
  4. first = touches[0],
  5. type = "";
  6. switch (event.type) {
  7. case "touchstart": type = "mousedown"; break;
  8. case "touchmove": type = "mousemove"; break;
  9. case "touchend": type = "mouseup"; break;
  10. default: return;
  11. }
  12. var simulatedEvent = new MouseEvent(type, { "altKey": false, "button": 0, "buttons": 0, "clientX": first.clientX, "clientY": first.clientY, "ctrlKey": false, "metaKey": false, "relatedTarget": first, "screenX": first.screenX, "screenY": first.screenY, "shiftKey": false });
  13. // var simulatedEvent = document.createEvent("MouseEvent");
  14. // simulatedEvent.initMouseEvent(type, true, true, window, 1,
  15. // first.screenX, first.screenY,
  16. // first.clientX, first.clientY, false,
  17. // false, false, false, 0/*left*/, null);
  18. first.target.dispatchEvent(simulatedEvent);
  19. }
  20. function init() {
  21. document.addEventListener("touchstart", touchHandler, true);
  22. document.addEventListener("touchmove", touchHandler, true);
  23. document.addEventListener("touchend", touchHandler, true);
  24. document.addEventListener("touchcancel", touchHandler, true);
  25. HTMLElement.prototype.__defineGetter__("ondblclick", function () {
  26. return this.doubleTap;
  27. });
  28. HTMLElement.prototype.__defineSetter__("ondblclick", function (fun) {
  29. this.doubleTap = fun;
  30. $(this).on("doubleTap", fun)
  31. });
  32. var eventlstener = HTMLElement.prototype.addEventListener;
  33. HTMLElement.prototype.addEventListener = function (type, fun, op) {
  34. if (type == "click") {
  35. eventlstener.call(this, type, function (e) {
  36. if (!this.startTime) {
  37. this.startTime = new Date().getTime();
  38. fun.call(this);
  39. }
  40. else {
  41. const time = new Date().getTime() - this.startTime;
  42. this.startTime = new Date().getTime();
  43. if (time > 200) {
  44. fun.call(this);
  45. }
  46. else {
  47. e.detail = 2;
  48. fun.call(this);
  49. }
  50. }
  51. }, op);
  52. }
  53. else {
  54. eventlstener.apply(this, arguments);
  55. }
  56. }
  57. // handleClick = (e: MouseEvent) => {
  58. // // 节点拖拽进画布之后,不触发click事件相关emit
  59. // // 点拖拽进画布没有触发mousedown事件,没有startTime,用这个值做区分
  60. // if (!this.startTime) return;
  61. // const time = new Date().getTime() - this.startTime;
  62. // if (time > 200) return; // 事件大于200ms,认为是拖拽, 不触发click事件。
  63. // const { model, graphModel } = this.props;
  64. // // 节点数据,多为事件对象数据抛出
  65. // const nodeData = model.getData();
  66. // const position = graphModel.getPointByClient({
  67. // x: e.clientX,
  68. // y: e.clientY,
  69. // });
  70. // const eventOptions: EventArgs = {
  71. // data: nodeData,
  72. // e,
  73. // position,
  74. // isSelected: false,
  75. // isMultiple: false,
  76. // };
  77. // const isRightClick = e.button === 2;
  78. // // 这里 IE 11不能正确显示
  79. // const isDoubleClick = e.detail === 2;
  80. // // 判断是否有右击,如果有右击则取消点击事件触发
  81. // if (isRightClick) return;
  82. // const { editConfigModel } = graphModel;
  83. // // 在multipleSelect tool禁用的情况下,允许取消选中节点
  84. // const isMultiple = isMultipleSelect(e, editConfigModel);
  85. // eventOptions.isMultiple = isMultiple;
  86. // if (model.isSelected && !isDoubleClick && isMultiple) {
  87. // eventOptions.isSelected = false;
  88. // model.setSelected(false);
  89. // } else {
  90. // graphModel.selectNodeById(model.id, isMultiple);
  91. // eventOptions.isSelected = true;
  92. // this.toFront();
  93. // }
  94. // // 不是双击的,默认都是单击
  95. // if (isDoubleClick) {
  96. // if (editConfigModel.nodeTextEdit && model.text.editable) {
  97. // model.setSelected(false);
  98. // graphModel.setElementStateById(model.id, ElementState.TEXT_EDIT);
  99. // }
  100. // graphModel.eventCenter.emit(EventType.NODE_DBCLICK, eventOptions);
  101. // } else {
  102. // graphModel.eventCenter.emit(EventType.ELEMENT_CLICK, eventOptions);
  103. // graphModel.eventCenter.emit(EventType.NODE_CLICK, eventOptions);
  104. // }
  105. // };
  106. }