Question

我正在尝试创建移动网页，我的网页上有一个表单，用户可以填写详细信息并提交。当尝试使用Chrome模拟器时发现触摸/点击非常不一致（附上了它的截图）..很难在输入框内单击，似乎按钮有时无法点击（当试图点击按钮时突出显示其他一些元素，如果我点击它，它偶尔点击它们是正确的。我认为有一些方法可以定义您的可点击元素区域，或者我不知道...对不起我是移动开发的新手。

下面是我的代码的摘录，

<!DOCTYPE html>
<html>
<head>

  <title>Dragend JS mobile demo</title>

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

  <style type="text/css">
    * {
      padding: 0;
      margin: 0;
      border: 0;
    }

    body {
      background: #eee;
      padding: 15px;
      font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    #demo {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      visibility: hidden;
      background: #457;
      cursor: hand;
      cursor: -moz-grab;
      cursor: -webkit-grab;
      cursor: grab;
    }

    #demo li.first {
      background: #577;
    }

    #demo li.middle {
      background: #1e8;
    }

    #demo li.last {
      background: #e8b;
    }

    #dragend {
      position: absolute;
      bottom: 50px;
      right: 50px;
      background: #345;
      padding: 18px;
      color: #fff;
      border-radius: 3px;
      width: 150px;
      font-size: 15px;
    }

    #dragend h1 {
      font-size: 15px;
      font-weight: normal;
      margin-bottom: 12px;
    }

    #dragend a {
      text-decoration: underline;
      color: #fff
    }

    #demo p {
      max-width: 600px;
      margin: 0 auto;
      padding: 0 30px;
      margin-bottom: 30px;
    }

    #demo p:first-child {
      margin-top: 30px;
    }

    #demo p:last-child {
      margin-bottom: 200px;
    }

  </style>


</head>
<body>

  <div id="demo">
    <ul>
      <li class="first dragend-page">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, excepturi, mollitia sapiente sequi adipisci fuga reiciendis qui provident aut alias iste nam at cumque inventore dignissimos quibusdam vero pariatur delectus!</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, excepturi, mollitia sapiente sequi adipisci fuga reiciendis qui provident aut alias iste nam at cumque inventore dignissimos quibusdam vero pariatur delectus!</p>
      </li>
      <li class="dragend-page">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, excepturi, mollitia sapiente sequi adipisci fuga reiciendis qui provident aut alias iste nam at cumque inventore dignissimos quibusdam vero pariatur delectus!</p>
        <p><input type="date" name="date" value="Deadline Date" id="date" class="shortField"></p>
        <p><input type="time" name="hour" value="Deadline Time" id="time" class="shortField"></p>
        <p>
        <input class="css_btn_formbtns" type="submit" value="Submit" style="float:left" />
        <input class="css_btn_formbtns" type="button" value="Back" style="float:right"/></p>
      </li>
      <li class="middle dragend-page">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, nihil fugit <a href="http://google.com">cupiditate</a> aut sit temporibus sint repellat et. Neque, harum, vel aut quidem tempore odit amet qui officiis ipsa voluptatem.</p>
     </li>
      <li class="dragend-page">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem, nihil fugit <a href="http://google.com">cupiditate</a> aut sit temporibus sint repellat et. Neque, harum, vel aut quidem tempore odit amet qui officiis ipsa voluptatem.</p>
     </li>
      <li class="last dragend-page">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem, excepturi, mollitia sapiente sequi adipisci fuga reiciendis qui provident aut alias iste nam at cumque inventore dignissimos quibusdam vero pariatur delectus!</p>
      </li>
    </ul>
  </div>


  <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>

<script type="text/javascript" src="../../dragend.js"></script>

  <script>

    $(function() {
      new Dragend($("#demo").get(0), {
        afterInitialize: function() {
          $("#demo").css("visibility", "visible");
        }
      });
    });

    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-219062-10']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();

  </script>

</body>
</html>

我正在使用Chrome模拟器，单独使用上面的代码，但在文本框中单击仍然很难。

请帮助..

HTML5移动网页 - 触摸区域问题

0 个答案: