jquery - h5 - 长摁
代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>h5 jquery 长摁</title>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style>
#mydiv {
width: 100%;
height: 100px;
background:#ddd;
font-size: 30px;
text-align: center;
}
</style>
</head>
<body>
长摁下方灰色区域
<div id="mydiv">这里是文字</div>
<script>
$("body").delegate("#mydiv", "click", function () {
console.log('点击');
});
var timeout;
$("body").delegate("#mydiv", "touchstart", function (e) {
console.log('开始长摁');
timeout = setTimeout(function () {
$("#mydiv").text("你长摁了");
}, 1500);
stopPropagation(e);
});
$("body").delegate("#mydiv", "touchmove", function (e) {
console.log('touchmove');
clearTimeout(timeout);
}, {passive: false});
$("body").delegate("#mydiv", "touchend", function (e) {
console.log('touchend');
$("#mydiv").text("这里是文字");
clearTimeout(timeout);
});
//阻止冒泡
function stopPropagation(e) {
if (e.stopPropagation)
e.stopPropagation();
else
e.cancelBubble = true;
}
</script>
</body>
</html>效果
f12 -> 手机模式下预览效果(PC模式下无效哦~)： 长摁下方灰色区域这里是文字
