无法在移动设备上点击 h1

Posted 2023-03-14

【中文标题】无法在移动设备上点击 h1

【英文标题】：Can't click the h1 on mobile devices

【发布时间】：2017-10-21 14:26:00

【问题描述】：

我发现了一个奇怪的故障/错误或其他东西。我的网站有两个按钮和两个图像的简单代码。如果单击按钮（带有事件侦听器的简单 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/

祝你好运！请帮帮我！

【参考方案1】：

iPhone 无法识别点击事件是very old and reproducible behaviour。您可以通过在要单击的元素上设置 cursor: pointer CSS 属性来绕过它。

【讨论】：

哇！惊人的！不知道。谢谢！