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

最新推荐文章于 2023-03-23 12:40:06 发布

weixin_30338461

最新推荐文章于 2023-03-23 12:40:06 发布

阅读量403

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xhliang/p/11491283.html

版权

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

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>vue source conde test</title>
    <style>
      .context-wrap {
        background-color: #f0f;
        height: 100px;
      }
      .contextmenu {
        background-color: #f00;
        color: #fff;
        height: 100px;
      }
    </style>
    <script src="./vue.min.js" type="text/javascript" charset="utf-8"></script>
  </head>
  <body>
    <div id="vuetest">
      <div class="context-wrap" @contextmenu.prevent="openMenu()">
        Click mouse right to trigger my custom actives
      </div>
      <div class="contextmenu" v-if="rightClick">
        click-right to show
      </div>
    </div>
    <script>
      var app = new Vue({
        el: '#vuetest',
        data: {
          rightClick: false
        },
        watch: {},
        computed: {},
        methods: {
          openMenu() {
            this.rightClick = true
            window.setTimeout(() => {
              this.rightClick = false
            }, 2000)
          }
        }
      })
    </script>
  </body>
</html>

转载于:https://www.cnblogs.com/xhliang/p/11491283.html