HTML5 jQuery绑定手机移动端触摸双击事件

Demo是一款jQuery移动设备触摸检测事件的处理Demo、同时使用鼠标双击也是可以实现相同的功能的、Demo的代码非常简单、使用了doubleTap事件、是一款非常有用的鼠标双击事件或移动设备的触摸双击事件的检测插件、Demo的效果非常简单、事件发生之后更换了焦点区域的背景色、效果图如下

CSS代码

<style type="text/css">
    #doubleTap-test{
        width: 300px;
        height: 300px;
        background-color: #D5D6E2;
        margin: 50px auto;
        cursor: pointer;
        -webkit-transition: background-color 1s;
        -o-transition: background-color 1s;
        transition: background-color 1s;
    }
</style>

HTML代码

<div class="htmleaf-content">
    <h3 class="center">使用鼠标或手指双击下面的矩形区域查看效果：</h3>
    <div id="doubleTap-test"></div>
</div>

JS代码

<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-doubleTap.js"></script>
<script type="text/javascript">
    var colors = ["#f5d76e","#3ec27f","#22a7f0","#d2527f","#1e824c","#bf55ec","#f64747","#e67e22","#4b77be","#be90d4"];
    $("#doubleTap-test").doubleTap(function() {
        var n = Math.floor(Math.random()*10);
        var color = colors[n]
        $("#doubleTap-test").css("background", color);
    });
    
</script>

html5手机端双击事件源代码下载链接: html5手机端双击事件源码 密码: 5vmq