Created
April 28, 2016 09:05
-
-
Save ufologist/81de2c32298b6d2ff334932d3b68b141 to your computer and use it in GitHub Desktop.
android wx.startRecord NO touchend
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>android wx.startRecord NO touchend</title> | |
| <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> | |
| </head> | |
| <body> | |
| <h1>在 Android 微信上 touchstart 时调用 wx.startRecord 会导致不会触发 touchend 事件</h1> | |
| <div> | |
| <p> | |
| 想法: 实现类似微信那样长按(touchstart)开始录音, 松开后(touchend)停止录音的功能 | |
| </p> | |
| <p> | |
| 症状: 浏览器没有触发 touchend 事件 | |
| </p> | |
| </div> | |
| <h2>重现问题</h2> | |
| <div> | |
| <div> | |
| <label for=""><input type="checkbox" checked class="js-enable-record"> 调用 startRecord</label> | |
| <br><br> | |
| <button class="js-record-btn" type="button" style="display:block;padding:1em;border:1px solid;width: 100%;text-align: left;-webkit-user-select: none;">长按我开始录音</button> | |
| <br> | |
| <a class="js-record-a" style="display:block;padding:1em;border:1px solid;">长按我开始录音</a> | |
| <br> | |
| <span class="js-record-span" style="display:block;padding:1em;border:1px solid;">长按我开始录音</span> | |
| </div> | |
| <br> | |
| <div> | |
| <textarea class="js-log" rows="10" style="width: 98%" readonly></textarea> | |
| </div> | |
| </div> | |
| <div> | |
| 异常表现: 当 touchstart 时调用了 wx.startRecord, 触发的事件为: touchstart -> touchcancel(此时还未松开手指) | |
| <br> | |
| 当 touchstart 时不调用 wx.startRecord, 触发的事件为: touchstart -> touchend(松开手指后) | |
| <br> | |
| PS: 如果只是迅速的按一下就松开(tap), 触发的事件为: touchstart -> touchend | |
| <br> | |
| 因此只有长按时才会有这个问题. | |
| </div> | |
| <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> | |
| <script> | |
| var checkRecord = document.querySelector('.js-enable-record'); | |
| var btnRecord = document.querySelector('.js-record-btn'); | |
| var aRecord = document.querySelector('.js-record-a'); | |
| var spanRecord = document.querySelector('.js-record-span'); | |
| var pLog = document.querySelector('.js-log'); | |
| // 如果想正式调试微信录音功能, 需要配置好微信 JS-API | |
| wx.config({ | |
| debug: false, | |
| appId: '', | |
| timestamp: 1461568306, | |
| nonceStr: '', | |
| signature: '', | |
| jsApiList: [ | |
| 'startRecord', | |
| 'stopRecord' | |
| ] | |
| }); | |
| function log(event) { | |
| pLog.textContent += event.target.tagName + ': ' + event.type + ': ' + Date.now() + '\n'; | |
| pLog.scrollTop = pLog.scrollHeight; | |
| } | |
| function startRecord() { | |
| // 必须使用 preventDefault, 否则 touchend 也可能不被触发 | |
| // [如何修复移动浏览器上 touchend 事件不触发的bug](https://www.douban.com/note/425950082/) | |
| event.preventDefault(); | |
| log(event); | |
| if (checkRecord.checked) { | |
| wx.startRecord(); | |
| } | |
| } | |
| function stopRecord(event) { | |
| log(event); | |
| wx.stopRecord(); | |
| } | |
| btnRecord.addEventListener('touchstart', startRecord); | |
| btnRecord.addEventListener('touchcancel', log); | |
| btnRecord.addEventListener('touchend', stopRecord); | |
| aRecord.addEventListener('touchstart', startRecord); | |
| aRecord.addEventListener('touchcancel', log); | |
| aRecord.addEventListener('touchend', stopRecord); | |
| spanRecord.addEventListener('touchstart', startRecord); | |
| spanRecord.addEventListener('touchcancel', log); | |
| spanRecord.addEventListener('touchend', stopRecord); | |
| </script> | |
| <div> | |
| <p> | |
| 由于 Android 上通过 touchstart 调用了 startRecord 后会立即触发元素的 touchcancel 事件, | |
| 继而造成 touchend 事件就不触发了, 这个是硬伤(尝试过后无法绕过解决), | |
| 因此没有办法实现长按录音, 松手后结束录音这个功能, | |
| 只好让用户再随便点击一下就结束录音好了. | |
| </p> | |
| <p> | |
| <strong>PS: iOS(测试过 iPhone5 iOS 7.0.6) 上没有这个问题<br>PS: 在浏览器上测试时发现, 长按时右键菜单被激活, 也会直接触发元素的 touchcancel 事件而导致 touchend 事件不被触发</strong> | |
| </p> | |
| </div> | |
| <h2>测试过存在这个问题的手机</h2> | |
| <ul> | |
| <li>MI 1S(Android 4.1.2) 微信 6.3.15</li> | |
| <li>HUAWEI G750-T20(Android 4.4.2) 微信 6.3.16</li> | |
| </ul> | |
| <h2>参考</h2> | |
| <ul> | |
| <li><a href="http://www.cnblogs.com/7z7chn/p/5400789.html">微信JSSDK与录音相关的坑</a></li> | |
| <li><a href="http://www.oschina.net/question/2360263_234703">想要实现类似微信的按下录音功能所有用到touch事件代码如下</a></li> | |
| </ul> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://gist.github.com/ufologist/81de2c32298b6d2ff334932d3b68b141#file-android-wx-startrecord-no-touchend-html-L68
是不是缺了个 function startRecord(_event_)