モバイルデバイスのh1をクリックできません

Question

私は奇妙な不具合やバグなどを発見しました。私のウェブサイトには2つのボタンと2つの画像の簡単なコードがあります。ボタン（イベントリスナー付きの単純なh1）をクリックすると、イメージの1つが回転します。シンプル。それは私のMacBook上で、たとえ "Inspect Element"上でも動作し、iPhoneなどをシミュレートしようとするとそこでうまくいきます。

しかし、私のiPhoneでは、h1をクリックすると何も起こりません。私はすべてを試して、私はすべての要素を取り除いた、Zインデックスを試した、何も助けた！

<div class="wrapper clearfix"> 
    <img class="bg" src="images/bg.svg"> 
    <img class="wheel" src="images/wheel.svg"> 
    <div class="right"> 
    <div class="g-recaptcha" data-sitekey="6LfhLTUUAAAAAMCrfKgrtViK22w1H98Uisw4dvlj"></div> 
     <h1 class="spin" data-spin="clicked">Roztočit</h1> 
    </div> 
</div> 

のCss：

.wrapper{ 
    width: 80vw; 
    position: relative; 
    height: 100vh; 
} 

.bg{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    z-index: 0; 
    pointer-events:none; 
} 

.wheel{ 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    top: 0; 
    left: 0; 
    transition: all 2s; 
    z-index: 10; 
    pointer-events:none; 
} 

.clearfix:after { 
    content: "."; 
    visibility: hidden; 
    display: block; 
    height: 0; 
    clear: both; 
} 

.right{ 
    width: 20vw; 
    min-width: 340px; 
    right: -20vw; 
    position: absolute; 
    padding-top: 20%; 
    top: 0; 
    z-index: 100; 
} 

.spin{ 
    width: 304px; 
    background-color: #78da92; 
    line-height: 78px; 
    font-size: 25px; 
    color: #fff; 
    border-radius: 4px; 
    margin-top: 25px; 
    z-index: 100; 
} 

のjQuery：

$(document).ready(function(){ 
     document.addEventListener('click', function (e) { 
      var t = e.target; 
      if (!t.dataset.hasOwnProperty('spin')) return; 

      var fD = new FormData(); 
      fD.append('boom', t.dataset.spin); 


      XXHR().request('get.php', function(response) { 
       var obj = JSON.parse(response); 
       console.log(obj); 
       $(".wheel").css("-ms-transform", "rotate("+obj.type1+"deg)"); 
       $(".wheel").css("-webkit-transform", "rotate("+obj.type1+"deg)"); 
       $(".wheel").css("transform", "rotate("+obj.type1+"deg)"); 
      }, function(err, status) { 

      }, true, fD); 
     }, false); 

     document.addEventListener("keypress", function(event) { 
      if (event.keyCode == 32) { 
       var fD = new FormData(); 
       fD.append('boom', 'clicked'); 


       XXHR().request('get.php', function(response) { 
        var obj = JSON.parse(response); 
        console.log(obj); 
        $(".wheel").css("-ms-transform", "rotate("+obj.type1+"deg)"); 
        $(".wheel").css("-webkit-transform", "rotate("+obj.type1+"deg)"); 
        $(".wheel").css("transform", "rotate("+obj.type1+"deg)"); 
       }, function(err, status) { 

       }, true, fD); 
      } 
     }) 
    }); 

注：あなたが入力した場合は問題はjQueryの/ JavaScriptではありません。

$(".spin").click() 

あなたにコンソール、それはうまく動作し、それは携帯電話でスピンします。

あなたのアイデアをテストするために、ウェブサイト：

http://uidave.com/wheel/

幸運！私を助けてください！

Answer 1

iPhoneがクリックイベントを認識しないのは、very old and reproducible behaviourです。クリックしたい要素のCSSプロパティをcursor: pointerに設定することで回避できます。