ufologist/touchend-doesnot-fire.html

## touchend-doesnot-fire.html
<!DOCTYPE html>
<html>
<head>
    <title>touchend doesn't fire on mobile devices</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
    <style>
    body {
        background-color: #eee;
    }
    .headline {
        font-size: 1.5em;
    }
    .headline small {
        display: block;
    }
    .touchme {
        height: 180px;
        line-height: 180px;
        margin-bottom: 10px;
        background-color: #4E9197;
        text-align: center;
        font-size: 3em;
        -webkit-user-select: none;
        box-shadow: 0 2px 5px #aaa;
        border-radius: 5px;
    }
    .textarea-log {
        width: 100%;
    }
    .author {
        border-top: 1px dashed #aaa;
        padding-top: 10px;
        text-align: right;
        color: #999;
        font-size: small;
    }
    blockquote a {
        display: block;
    }
    </style>
</head>
<body>
    <h1 class="headline">FIXBUG: touchend doesn't fire <small>on mobile devices</small></h1>
    <div class="touchme">touch me</div>
    <textarea class="textarea-log" cols="30" rows="10"></textarea>
    <input type="checkbox" id="js-fixtouch"><label for="js-fixtouch">fix touch event problem</label>
    <p class="author">2014-9-19 Sun</p>
    <ul>
        <li><a href="http://code.google.com/p/android/issues/detail?id=19827">WebView touchevents are not fired propperly if e.preventDefault() is not used on touchstart and touchmove</a></li>
        <li><a href="http://blog.mobiscroll.com/working-with-touch-events/">Working with touch events</a></li>
    </ul>
    <script>
    var touchEl = document.querySelector('.touchme');
    var logEl = document.querySelector('.textarea-log');
    var fixtouchEl = document.querySelector('#js-fixtouch');
    function logEvent(type) {
        logEl.innerHTML = logEl.innerHTML + '\n' + new Date().toLocaleTimeString() + ' - ' + type;
        logEl.scrollTop = logEl.scrollHeight;
    }

    touchEl.addEventListener('touchstart', function(event) {
        logEvent('[touchstart]');
        // 在touchstart中阻止事件的默认行为即可修复touchmove和touchend事件不触发的问题
        if (fixtouchEl.checked) {
            event.preventDefault();
        }
    }, false);
    touchEl.addEventListener('touchmove', function(event) {
        logEvent('touchmove');
    }, false);
    touchEl.addEventListener('touchend', function(event) {
        logEvent('[touchend]');
    }, false);
    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>touchend doesn't fire on mobile devices</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
	<style>
	body {
	background-color: #eee;
	}
	.headline {
	font-size: 1.5em;
	}
	.headline small {
	display: block;
	}
	.touchme {
	height: 180px;
	line-height: 180px;
	margin-bottom: 10px;
	background-color: #4E9197;
	text-align: center;
	font-size: 3em;
	-webkit-user-select: none;
	box-shadow: 0 2px 5px #aaa;
	border-radius: 5px;
	}
	.textarea-log {
	width: 100%;
	}
	.author {
	border-top: 1px dashed #aaa;
	padding-top: 10px;
	text-align: right;
	color: #999;
	font-size: small;
	}
	blockquote a {
	display: block;
	}
	</style>
	</head>
	<body>
	<h1 class="headline">FIXBUG: touchend doesn't fire <small>on mobile devices</small></h1>
	<div class="touchme">touch me</div>
	<textarea class="textarea-log" cols="30" rows="10"></textarea>
	<input type="checkbox" id="js-fixtouch"><label for="js-fixtouch">fix touch event problem</label>
	<p class="author">2014-9-19 Sun</p>
	<ul>
	<li><a href="http://code.google.com/p/android/issues/detail?id=19827">WebView touchevents are not fired propperly if e.preventDefault() is not used on touchstart and touchmove</a></li>
	<li><a href="http://blog.mobiscroll.com/working-with-touch-events/">Working with touch events</a></li>
	</ul>
	<script>
	var touchEl = document.querySelector('.touchme');
	var logEl = document.querySelector('.textarea-log');
	var fixtouchEl = document.querySelector('#js-fixtouch');
	function logEvent(type) {
	logEl.innerHTML = logEl.innerHTML + '\n' + new Date().toLocaleTimeString() + ' - ' + type;
	logEl.scrollTop = logEl.scrollHeight;
	}

	touchEl.addEventListener('touchstart', function(event) {
	logEvent('[touchstart]');
	// 在touchstart中阻止事件的默认行为即可修复touchmove和touchend事件不触发的问题
	if (fixtouchEl.checked) {
	event.preventDefault();
	}
	}, false);
	touchEl.addEventListener('touchmove', function(event) {
	logEvent('touchmove');
	}, false);
	touchEl.addEventListener('touchend', function(event) {
	logEvent('[touchend]');
	}, false);
	</script>
	</body>
	</html>