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>

  翻  牌  子

CSS - pointer-events: none;

可以让某个元素实现类似于海市蜃楼的效果,可以看的到某个元素,但是你无法摸的着。

pointer-events: none;

JS - 数组元素根据指定的字段排序

var arr = [
{far:123.45,address:"金粮路"},
{far:3685.45,address:"北京路"},
{far:2.8,address:"人民公园"},
];
//
arr.sort(function (a, b) {
    if (a.far < b.far) {
        return -1;
    } else if (a.far == b.far) {
        return 0;
    } else {
        return 1;
    }