純粋なJavaScriptを使用してモバイルデバイス上のイメージにオーバーレイを表示

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タグに包まれたイメージを持っています以下に示す：

そしてのでそれオーバーレイのは、携帯電話の画面に表示されていません。私はそれをどのように修正できるのかを助けてくれる必要があります。

EDIT：

私は、プレーンJavaScriptを使用してタッチスワイプイベントを追加することを考えていますが、私はまさにそれを行うことができないのです。 私は何か助けを得ることができる場合は教えてください！

Answer 1

リンクを外してイベントリスナーを直接画像に追加するだけではどうですか？

Answer 2

モバイルデバイスのリンクのネイティブ動作は、説明したとおりに機能します。保持するとメニューがトリガーされます。あなたがBojanのようにリンクを削除するだけでそれを削除する必要がある場合。