ufologist/android-wx-startrecord-no-touchend.html

## android-wx-startrecord-no-touchend.html
<!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 -&gt; touchcancel(此时还未松开手指)
        <br>
        当 touchstart 时不调用 wx.startRecord, 触发的事件为: touchstart -&gt; touchend(松开手指后)
        <br>
        PS: 如果只是迅速的按一下就松开(tap), 触发的事件为: touchstart -&gt; 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>
	<!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>