:bug: fix #18

CHANGELOG.md

@@ -38,6 +38,7 @@
 
 ### v1.10.8 / 2019-12-09
 
+* [18](https://github.com/Vanessa219/vditor/issues/18) 菜单栏上的按钮会触发 form 提交事件 `bug`
 * [17](https://github.com/Vanessa219/vditor/issues/17) tip 会遮挡住输入框的上部 `enhancement`
 * [16](https://github.com/Vanessa219/vditor/issues/16) 复制代码按钮错误 `bug`
 * [14](https://github.com/Vanessa219/vditor/issues/14) Vditor.preview不能渲染 `bug`

src/ts/hint/index.ts

@@ -1,6 +1,5 @@
 import {formatRender} from "../editor/formatRender";
 import {getSelectPosition} from "../editor/getSelectPosition";
-import {selectIsEditor} from "../editor/selectIsEditor";
 import {setSelectionFocus} from "../editor/setSelection";
 import {code160to32} from "../util/code160to32";
 import {getText} from "../util/getText";
@@ -158,8 +157,9 @@ ${i === 0 ? "class='vditor-hint--current'" : ""}> ${html}</button>`;
         this.element.style.display = "block";
 
         this.element.querySelectorAll("button").forEach((element) => {
-            element.addEventListener("click", () => {
+            element.addEventListener("click", (event) => {
                 this.fillEmoji(element, vditor);
+                event.preventDefault();
             });
         });
         // hint 展现在上部

src/ts/toolbar/Both.ts

@@ -23,12 +23,13 @@ export class Both extends MenuItem {
     }
 
     public _bindEvent(vditor: IVditor) {
-        this.element.children[0].addEventListener(getEventName(), () => {
+        this.element.children[0].addEventListener(getEventName(), (event) => {
             if (vditor.currentPreviewMode === "both") {
                 setPreviewMode("editor", vditor);
             } else {
                 setPreviewMode("both", vditor);
             }
+            event.preventDefault();
         });
     }
 }

src/ts/toolbar/Devtools.ts

@@ -7,7 +7,8 @@ export class Devtools extends MenuItem {
         super(vditor, menuItem);
         this.element.children[0].innerHTML = menuItem.icon || bugSVG;
 
-        this.element.addEventListener(getEventName(), async () => {
+        this.element.addEventListener(getEventName(), async (event) => {
+            event.preventDefault();
             if (this.element.children[0].className.indexOf("vditor-menu--current") > -1) {
                 this.element.children[0].classList.remove("vditor-menu--current");
                 vditor.devtools.element.style.display = "none";

src/ts/toolbar/Fullscreen.ts

@@ -11,7 +11,8 @@ export class Fullscreen extends MenuItem {
     }
 
     public _bindEvent(vditor: IVditor, menuItem: IMenuItem) {
-        this.element.children[0].addEventListener(getEventName(), function() {
+        this.element.children[0].addEventListener(getEventName(), function(event) {
+            event.preventDefault();
             const vditorElement = document.getElementById(vditor.id);
             if (vditorElement.className.indexOf("vditor--fullscreen") > -1) {
                 this.innerHTML = menuItem.icon || fullscreenSVG;

src/ts/toolbar/Help.ts

@@ -7,7 +7,8 @@ export class Help extends MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
         super(vditor, menuItem);
         this.element.children[0].innerHTML = menuItem.icon || helpSVG;
-        this.element.children[0].addEventListener(getEventName(), () => {
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
             openURL("https://hacpai.com/guide/markdown");
         });
     }

src/ts/toolbar/Info.ts

@@ -7,7 +7,8 @@ export class Info extends MenuItem {
     constructor(vditor: IVditor, menuItem: IMenuItem) {
         super(vditor, menuItem);
         this.element.children[0].innerHTML = menuItem.icon || infoSVG;
-        this.element.children[0].addEventListener(getEventName(), () => {
+        this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
             openURL("https://github.com/Vanessa219/vditor");
         });
     }

src/ts/toolbar/Preview.ts

@@ -23,12 +23,13 @@ export class Preview extends MenuItem {
     }
 
     public _bindEvent(vditor: IVditor) {
-        this.element.children[0].addEventListener(getEventName(), () => {
+        this.element.children[0].addEventListener(getEventName(), (event) => {
             if (vditor.currentPreviewMode === "preview") {
                 setPreviewMode("editor", vditor);
             } else {
                 setPreviewMode("preview", vditor);
             }
+            event.preventDefault();
         });
     }
 }

src/ts/toolbar/Record.ts

@@ -16,6 +16,7 @@ export class Record extends MenuItem {
     public _bindEvent(vditor: IVditor) {
         let mediaRecorder: MediaRecorder;
         this.element.children[0].addEventListener(getEventName(), (event) => {
+            event.preventDefault();
             if (!mediaRecorder) {
                 navigator.mediaDevices.getUserMedia({audio: true}).then((mediaStream: MediaStream) => {
                     mediaRecorder = new MediaRecorder(mediaStream);
@@ -53,7 +54,6 @@ export class Record extends MenuItem {
                 mediaRecorder.startRecordingNewWavFile();
                 this.element.children[0].classList.add("vditor-menu--current");
             }
-            event.preventDefault();
         });
     }
 }