Question

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

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添加触摸滑动事件，但我无法完全执行此操作。如果我能得到任何帮助，请告诉我！

Answer 1

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

Answer 2

移动设备上链接的本机行为可以解释。它会在按住时触发菜单。如果你不需要链接就像Bojan说的那样删除它。

使用纯JavaScript在移动设备上显示图像上的叠加层

2 个答案: