blocks|key|174051|text|在旧的WebKit版本中，触摸事件有一些奇怪的bug。看看这个bug报告：5491，19827，4549，150779。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|174052|诀窍是在touchstart事件处理程序中添加e.preventDefault()。这是必需的，因为浏览器处理本机滚动的方式。|style|CODE|174053|android-swipe-shim项目提供了另一个解决方案和一些更多信息：|174054|在一些Android设备上，当用户触摸屏幕时，|174055|事件被触发，Android将该事件传递给WebView+(javascript)进行处理。如果WebView不预防默认(在200ms内)，安卓将恢复本机滚动，并停止向WebView传递触摸事件。|blockquote|174056|174057|这个问题的解决方案主要是在touchstart上使用preventDefault，并使用javascript手动滚动。|174058|这种行为嵌入在数百万的Android设备中，无法从源头上纠正。|174059|此填充程序通过覆盖可本机滚动的包含元素并根据其滚动偏移量触发卷帘事件来提供解决方案，从而允许您的软件在启用本机滚动的情况下处理移动事件。|174060|entityMap|0|LINK|mutability|MUTABLE|url|https://code.google.com/p/android/issues/detail?id=5491|1|https://code.google.com/p/android/issues/detail?id=19827|2|https://code.google.com/p/android/issues/detail?id=4549|3|https://code.google.com/p/chromium/issues/detail?id=150779|4|https://github.com/TNT-RoX/android-swipe-shim^0|11|4|0|16|5|1|1C|4|2|1H|6|3|0|4|A|N|I|0|0|I|4|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1B|8|@]|9|@$A|1C|B|1D|1|1E]|$A|1F|B|1G|1|1H]|$A|1I|B|1J|1|1K]|$A|1L|B|1M|1|1N]]|C|$]]|$1|D|3|E|5|6|7|1O|8|@$A|1P|B|1Q|F|G]|$A|1R|B|1S|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|1T|8|@]|9|@$A|1U|B|1V|1|1W]]|C|$]]|$1|J|3|K|5|6|7|1X|8|@]|9|@]|C|$]]|$1|L|3|M|5|N|7|1Y|8|@]|9|@]|C|$]]|$1|O|3|-4|5|6|7|1Z|8|@]|9|@]|C|$]]|$1|P|3|Q|5|6|7|20|8|@]|9|@]|C|$]]|$1|R|3|S|5|6|7|21|8|@]|9|@]|C|$]]|$1|T|3|U|5|6|7|22|8|@]|9|@]|C|$]]|$1|V|3|-4|5|6|7|23|8|@]|9|@]|C|$]]]|W|$X|$5|Y|Z|10|C|$11|12]]|13|$5|Y|Z|10|C|$11|14]]|15|$5|Y|Z|10|C|$11|16]]|17|$5|Y|Z|10|C|$11|18]]|19|$5|Y|Z|10|C|$11|1A]]]]

<p>There some odd bugs with touch events in older WebKit versions. Take a look at this bug reports: <a href="https://code.google.com/p/android/issues/detail?id=5491" rel="nofollow noreferrer">5491</a>, <a href="https://code.google.com/p/android/issues/detail?id=19827" rel="nofollow noreferrer">19827</a>, <a href="https://code.google.com/p/android/issues/detail?id=4549" rel="nofollow noreferrer">4549</a>, <a href="https://code.google.com/p/chromium/issues/detail?id=150779" rel="nofollow noreferrer">150779</a>.</p>
<p>The trick is to add <code>e.preventDefault()</code> in <code>touchstart</code> event handler. This is required because of the way native scrolling is handled by the browser.</p>
<p><a href="https://github.com/TNT-RoX/android-swipe-shim" rel="nofollow noreferrer">android-swipe-shim</a> project provides another solution and some more info:</p>
<blockquote>
<p>On some Android devices when the user touches the screen a touchstart event is fired, Android passes the event to WebView (javascript) to be handled. If WebView does not preventdefault (within 200ms), Android resumes native scrolling and stops passing touch events to WebView.</p>
<p>The solution to this has mostly been to preventDefault on touchstart and manually scroll using javascript.</p>
<p>This behavior is embedded in millions of Android devices and cannot be corrected at its source.</p>
<p>This shim provides a solution by overlaying a contained element that can be natively scrolled and fires swipe events based on its scroll offsets, allowing your software to handle move events with native scrolling enabled.</p>
</blockquote>


blocks|key|177837|text|也许可以尝试延迟添加事件侦听器，直到DOM准备就绪？|type|unstyled|depth|inlineStyleRanges|entityRanges|data|177838|<script>
++function+touchTest()+{
++++document.getElementById('touch').addEventListener('touchstart',+function+()+{+alert+('touch');+}+,+false);
++++document.getElementById('click').addEventListener('click',+function+()+{+alert('click');+}+,+false);
++}

++document.addEventListener('DOMContentLoaded',+touchTest);
</script>|code-block|syntax|javascript|177839|代码在重新加载时工作的事实可能表明在第一次加载页面时添加事件侦听器的速度太快了？|177840|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Maybe try to delay adding the event listeners until the DOM is ready?</p>

<pre><code>&lt;script&gt;
  function touchTest() {
    document.getElementById('touch').addEventListener('touchstart', function () { alert ('touch'); } , false);
    document.getElementById('click').addEventListener('click', function () { alert('click'); } , false);
  }

  document.addEventListener('DOMContentLoaded', touchTest);
&lt;/script&gt;
</code></pre>

<p>The fact that your code works on a reload might indicate that the event listeners are being added too quickly on the first page load?</p>


blocks|key|2994615|text|您的html标记和js似乎工作得很好。您应该检查元素是否需要在您的实际标记中处理"touchstart“是否具有"title”属性。这可能是它不会在第一次接触时开火的一个原因。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2994616|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Your html markups and js seems to work well. You should check if the element needs handling "touchstart" in your real markups has "title" attribute. This could be a reason that makes it not to fire at first touch.</p>


blocks|key|2781999|text|我猜这和你的Chrome版本有关。你的代码在Chrome+Dev+58.0.3007.3+(安卓7.1.1+build+NMF26F)上运行良好，在第一次加载时也是如此。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2782000|尝试修改代码，它会在主体加载后添加侦听器：|2782001|<!DOCTYPE+html>
<html>
++++<head>
++++++++<meta+charset="UTF-8"+/>
++++++++<title>touch+start+on+Android</title>
++++++++<style+type="text/css">
++++++++++++#touch,+#click++{
++++++++++++++++position:+relative;
++++++++++++++++left:+100px;
++++++++++++++++top:+100px;
++++++++++++++++width:+200px;
++++++++++++++++height:+200px;
++++++++++++++++border:+solid+1px+black;
++++++++++++}
++++++++</style>
++++++++<script+type="text/javascript">
++++++++++++function+startListening()++{
++++++++++++++++document.getElementById("touch").addEventListener("touchstart",+function()++{alert("touch");},+false);
++++++++++++++++document.getElementById("click").addEventListener("click",+function()++{alert("click");},+false);
++++++++++++}
++++++++</script>
++++</head>
++++<body+onload="startListening()">
++++++++<div+id="touch">Touch</div>
++++++++<div+id="click">Click</div>
++++</body>
</html>|code-block|syntax|javascript|2782002|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p><em>I'm guessing it's something to do with your version of Chrome.
Your code's working fine, on first load too, on Chrome Dev 58.0.3007.3 (Android 7.1.1 build NMF26F)</em></p>

<p>Try this modification of the code, it adds the listeners after the body has been loaded:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8" /&gt;
        &lt;title&gt;touch start on Android&lt;/title&gt;
        &lt;style type="text/css"&gt;
            #touch, #click  {
                position: relative;
                left: 100px;
                top: 100px;
                width: 200px;
                height: 200px;
                border: solid 1px black;
            }
        &lt;/style&gt;
        &lt;script type="text/javascript"&gt;
            function startListening()  {
                document.getElementById("touch").addEventListener("touchstart", function()  {alert("touch");}, false);
                document.getElementById("click").addEventListener("click", function()  {alert("click");}, false);
            }
        &lt;/script&gt;
    &lt;/head&gt;
    &lt;body onload="startListening()"&gt;
        &lt;div id="touch"&gt;Touch&lt;/div&gt;
        &lt;div id="click"&gt;Click&lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|2782019|text|是的，我也已经修复了通过添加触摸移动事件到文档添加以下代码到您的JS文件这应该可以工作。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2782020|document.addEventListener("touchmove",function(){})|code-block|syntax|javascript|2782021|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Yes, mee too I have fixed through adding touch move event to document
Add following code to your JS file
this should work.</p>

<pre><code>document.addEventListener("touchmove",function(){})
</code></pre>


blocks|key|174121|text|$(document).ready(function(){
++document.getElementById('touch').addEventListener('touchstart',+function+()+{+alert+('touch');+}+,+false);
++document.getElementById('click').addEventListener('click',+function+()+{+alert('click');+}+,+false);
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|174122|尝尝这个。当页面加载时，javascript会运行你的代码。这是你问题的Jquery解决方案(如果它有效的话)。如果您不想使用jquery，您可以找到javascript等效形式的|unstyled|174123|文档$(+|174124|+).ready|blockquote|174125|174126|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|F|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|F|7|T|8|@]|9|@]|A|$]]]|N|$]]

<pre><code>$(document).ready(function(){
  document.getElementById('touch').addEventListener('touchstart', function () { alert ('touch'); } , false);
  document.getElementById('click').addEventListener('click', function () { alert('click'); } , false);
});
</code></pre>

<p>Try this. When page is loaded javascript will run your code.
this is Jquery solution of your issue(if it works).
if you don't want to use jquery, you can find javascript equivalent form of </p>

<blockquote>
  <p>$(document).ready</p>
</blockquote>


<p>On Android Chrome, when you create a new tab and access to a page with the content below, your touches to #touch div have never triggered touch-start events. Once you reload the page, you can trigger the event.</p>

<p>Why? and How can I avoid this situation?</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;meta charset="UTF-8" /&gt;
  &lt;title&gt;touch start on Android&lt;/title&gt;
  &lt;style type="text/css"&gt;
  #touch, #click {
    position: relative;
    left: 100px;
    top: 100px;
    width: 200px;
    height: 200px;
    border: solid 1px black;
  }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
  &lt;div id="touch"&gt;Touch&lt;/div&gt;
  &lt;div id="click"&gt;Click&lt;/div&gt;
  &lt;script type="text/javascript"&gt;
  document.getElementById('touch').addEventListener('touchstart', function () { alert ('touch'); } , false);
  document.getElementById('click').addEventListener('click', function () { alert('click'); } , false);
  &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<h3>My environment is,</h3>

<ol>
<li>Nexus 7 (2013)</li>
<li>Android 4.30 build number JSS15Q</li>
<li>Chrome 29.0.1547.72 (WebKit version 537.36(@156722), JavaScript version V8 3.19.18.21)</li>
</ol>


Touchstart event never be triggered on Android Chrome at the first time of page loading

Android

在Android Chrome上，当你创建一个新的标签并访问一个包含下面内容的页面时，你对#touch div的触摸从未触发过触摸启动事件。重新加载页面后，即可触发事件。为什么？我怎样才能避免这种情况？<!DOCTYPE html><html><head>  <meta charset="UTF-8" />  <tit...

问Android Chrome不会在第一次加载页面时触发Touchstart事件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Android Chrome不会在第一次加载页面时触发Touchstart事件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Android Chrome不会在第一次加载页面时触发Touchstart事件
EN