h5长按图片自定义菜单

javascript
  目录
  1. 1. h5长按图片自定义菜单
    1. 1.1. 我们平时在使用浏览器访问网页时，有图片的场景，长按图片：
    2. 1.2. 阻止浏览器默认图片长按事件
      1. 1.2.1. css方法
      2. 1.2.2. 蒙层方法
    3. 1.3. 示例代码

移动端页面，长按图片，弹出自定义菜单

h5长按图片自定义菜单

我们平时在使用浏览器访问网页时，有图片的场景，长按图片：

浏览器：
img
微信:
img
自定义：
img

阻止浏览器默认图片长按事件

css方法

给指定的图片加上css样式后，可以阻止浏览器的图片默认长按事件

1
2
3
img {
  pointer-events:none;
}

蒙层方法

在图片上加一个蒙层，给这个蒙层加长按事件。
之后就可以根据需求，给指定图片加上长按事件，自己制作一个菜单，弹出显示。
这里使用了alloy-finger.js库添加长按事件

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    *{
      margin: 0;
    }
    #div_1 {
      width: 100%;
      height: 100px;
      background: #cccccc;
    }
    #img_1 img {
      width: 100%;
      pointer-events:none;
    }
    #img_2 {
      text-align: center;
    }
    #img_2 img {
      width: 50%;
    }
    #img_3 {
      position: relative;
    }
    #img_3 img, #img_3 .mask {
      width: 150px;
      height: 150px;
    }
    #img_3 .mask {
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, .3);
      color: red;
      font-size: 30px;
      text-align: center;
    }
    #modal {
      display: none;
      position: absolute;
      box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .3);
      width: 150px;
      background: #ffffff;
    }
    #modal p {
      padding-left: 20px;
      line-height: 30px;
      border-bottom: 1px solid #cccccc;
    }
  </style>
</head>
<body>
  <div id="img_1">
    <img src="./img.jpg" alt="" srcset="">
  </div>
  <div id="div_1">
    
  </div>
  <div id="img_2">
    <img src="./code.png" alt="">
  </div>
  <div id="img_3">
    <img src="./code.png" alt="">
    <div class="mask"></div>
  </div>
  <div id="modal">
    <p>菜单项1</p>
    <p>菜单项2</p>
    <p>菜单项3</p>
  </div>
</body>
<script src="./alloy-finger.js"></script>
<script src="./vconsole.min.js"></script>
<script>
  var nModal = document.querySelector('#modal');
  var vConsole = new VConsole();
  new AlloyFinger('#img_1', {
    longTap: function (ev) {
      showModal(ev);
    }
  });
  new AlloyFinger('#img_2 img', {
    longTap: function (ev) {
      showModal(ev);
    }
  });
  new AlloyFinger('#img_3', {
    longTap: function (ev) {
      showModal(ev);
    }
  });

  // 显示长按modal
 function showModal(ev) {
   var pointer = ev.touches[0];
   nModal.style.display = 'block';
   nModal.style.top = pointer.pageY + 'px';
   nModal.style.left = pointer.pageX + 'px';
 }
 // 隐藏modal
 function hideModal() {
  nModal.style.display = 'none';
 }
 // modal菜单加事件
 document.querySelector('#modal').addEventListener('click', function(ev) {
   hideModal();
   alert('点击了' + ev.target.innerText);
 }, false);
</script>
</html>
  移动端