Vue 監聽滑鼠左鍵 滑鼠右鍵以及滑鼠中鍵修飾符click.left&contextmenu&click.middle
阿新 • • 發佈：2021-07-12
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="vue.js"></script> <title id="title">{{title}}</title> </head> <body> <div id="ask"><!--vue不能控制body和html的標籤--> <!--滑鼠左鍵--> <div那時候我只有一臺錄音機也沒有電腦 也不敢奢求說唱會讓自己的生活變好:style="left_style" @click.left="mouseclick('左')"></div> <!--滑鼠中鍵--> <div :style="middle_style" @click.middle="mouseclick('中')"></div> <!--滑鼠右鍵--> <!--加prevent為了遮蔽瀏覽器自帶右鍵--> <div :style="right_style" @contextmenu.prevent="mouseclick('右')"></div> </div> <script> var vue = function (options){new Vue(options)}; vue({ el:'#title', data:{ title:'Vue 監聽滑鼠左鍵 滑鼠右鍵以及滑鼠中鍵修飾符click.left&contextmenu&click.middle' } }); var app = vue({ el:'#ask', data:{ left_style:{border:'solid 2px red',height:'200px'}, right_style:{border:'solid 2px blue',height:'200px'}, middle_style:{border:'solid 2px yellow',height:'200px'}, }, methods:{ mouseclick(where){ alert('點選滑鼠'+where+'鍵觸發'); }, } }); </script> </body> </html>