html5取消右键,html 网页右键取消默认动作，自定义动作

在网页端 鼠标右键是默认的网页操作，右键查看源代码等；如何阻止这个默认动作，去自定义右键关闭按钮；

利用html5的contextmenu事件阻止默认行为并定义自己右键功能；

vue source conde test

.context-wrap {

background-color: #f0f;

height: 100px;

}

.contextmenu {

background-color: #f00;

color: #fff;

height: 100px;

}

Click mouse right to trigger my custom actives

click-right to show

var app = new Vue({

el: '#vuetest',

data: {

rightClick: false

},

watch: {},

computed: {},

methods: {

openMenu() {

this.rightClick = true

window.setTimeout(() => {

this.rightClick = false

}, 2000)

}

}

})