javascript - 无法在移动设备上单击 h1

Question

我发现了一个奇怪的故障/错误之类的。我的网站有两个按钮和两个图像的简单代码。如果您单击按钮(带有事件监听器的简单 h1)，其中一个图像会旋转。简单的。它适用于我的 MacBook，甚至适用于“Inspect Element”，如果我尝试模拟 iPhone 等，它在那里工作得很好。

但是!在我的 iPhone 上，如果我点击 h1，什么也不会发生。我尝试了一切，我摆脱了所有元素，尝试了 z-index，没有任何帮助!

<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 .您可以通过在要单击的元素上设置 cursor: pointer CSS 属性来解决这个问题。