スマートフォンのタップをjavascriptで検出する

いつもお世話になっております。

現在RailsでWEBページを作成しております。
ボタンを押すと画面全体に透過された黒い背景を全体にオーバーレイするようになっており、そのオーバーレイされた黒い背景をタップすると、その背景が消えるようにjavascriptに記載しております。

PCにてブラウザはgoogle chromeで動作させた場合には、動作するのですが、iPhoneにてブラウザはSafariを用いた場合には動作しません（タップしても黒い背景が消えない）。

コンソールで確認してみると、jQuery(document).click(function(event)が動作してないように思えるのですが、これはスマホのタッチには対応していないということでしょうか。

スマートフォンのタップにも対応できるような記載の方法をご教示いただけますと幸いです。
よろしくお願いいたします。

<style>
.main {
      width: 100%;
      height: 100%;
  }
  .content-wrapper {
      width: 100%;
      height: auto;
  }
  .open-overlay {
      position: fixed;
      top: 0;
      left: 0;
      display: block;
      background: #FFFFFF;
      width: 100%;
      height: 0px;
  }
  .overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #000000;
      display: none;
      opacity: 0.5;
  }
  .close-overlay {
      position: absolute;
      top: 0;
      right: 0;
      color: #FFFFFF;
      display: inline-block;
  }
</style>

    <main id="jsi-main" class="main">
        <a href="javascript:void(0);" id="jsi-open-overlay" class="open-overlay"></a>
        <div class="content-wrapper">
        </div>
        <div id="jsi-overlay" class="overlay">
            <a href="javascript:void(0);" id="jsi-close-overlay" class="close-overlay"></a>
        </div>
    </main>

<script>
jQuery(document).ready(function() {

// オーバーレイの開閉処理
overlayOpener.addEventListener('click', function(){
    // スクロール位置保持
    scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
    overlay.style.display = 'block';
    main.style.position = 'fixed';
    main.style.top = '-' + scrollPosition + 'px';

    current_scrollY = $( window ).scrollTop();

    jQuery( 'body' ).css( {
      position: 'fixed',
      width: '100%',
      top: -1 * current_scrollY
    } );
});

// クリックを検出しdiv overlayの範囲の時オーバーレイを消す
jQuery(document).click(function(event) {
  if(!$(event.target).closest('.overlay').length) {
    
  } else {
    overlay.style.display = 'none';
    main.style.position = 'static';
    main.style.top = 0;
    window.scrollTo(0, scrollPosition);
  }
});
</script>