使用纯 JavaScript 在移动设备上显示叠加层答案

【问题标题】：Show overlay on image on mobile devices using pure JavaScript使用纯 JavaScript 在移动设备上显示叠加层
【发布时间】：2018-04-28 12:24:10
【问题描述】：

我有一个要求，即每当用户触摸图像时，我都需要在移动设备上的图像上显示叠加层。我正在使用如下所示的代码进行操作：

document.getElementsByTagName('img')[0].addEventListener('touchstart', function(event){
    
    let elementExists = document.getElementById('wrapper'); 
    let Center = document.createElement('div');

     
    if (!elementExists) {
      let Wrapper = document.createElement('div');
      let parentElement = event.currentTarget.parentElement;
      Wrapper.classList.add('Wrapper');
      Wrapper.id = 'wrapper';
      
     Center.classList.add('Center');
      
     parentElement.appendChild(Wrapper);
     Wrapper.appendChild(Center);
    
      Wrapper.addEventListener('touchend', function(event){
        if (document.getElementById('wrapper')) {
            document.getElementById('wrapper').remove();
        }
      });
    }
});

.col-md-6 {
        width: 375px;
        height: 211px;
        margin: 20px;
        position: relative;
    }
    
        .Wrapper {
        display: table;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.5);
        height: 100% !important;
        width: 100%;
        text-align: center;
        z-index: 1000;
        font-family: arial;
        color: #fff;
        top: 0;
    }

    .Center {
        display: table-cell;
        vertical-align: middle;
    }

<div class="col-md-6">
<a href="https://google.com">
<img src="https://www.blog.google/static/blog/images/google-200x200.7714256da16f.png" />
</a>
</div>

上面的代码可以正常工作，但是我将图像包裹在a 标签中，所以默认情况下，当用户触摸图像时它会显示屏幕，如下所示：

因此，覆盖不会显示在移动屏幕上。我需要帮助我该如何解决它。

编辑：

我正在考虑使用纯 JavaScript 添加触摸滑动事件，但我无法完全做到。如果我能得到任何帮助，请告诉我！

【问题讨论】：

标签： javascript mobile touch-event

【解决方案1】：

移动设备上链接的本机行为如您所解释的那样工作。按住时会触发菜单。如果您不需要链接，只需像 Bojan 所说的那样将其删除。

【讨论】：

我没有完全理解。但我需要图像上的两种行为。 1.如果用户点击图片，它应该将他重定向到一个href链接。 2.如果用户长按该图像，它应该显示覆盖而不显示弹出窗口。请告诉我可能的解决方案。

【解决方案2】：

为什么不省略链接，直接将事件侦听器添加到图像中？

【讨论】：

我只向图像添加事件监听器。不要链接。
所以你实际上是想让图像既是链接又是触摸事件？
他的意思是你可以从 JS 做任何事情，因为你有鼠标事件，这样做你可以摆脱锚标签。
我没有完全理解。但我需要图像上的两种行为。 1. 如果用户点击图片，它应该将他重定向到一个 href 链接。 2.如果用户长时间触摸该图像，它应该显示覆盖而不显示弹出窗口。请告诉我可能的解决方案。
@BojanIvanac 是的，我的要求是将图像视为链接并具有触摸事件。