移动平台浏览器的触控操作

比如说需要在一个页面中实现左右滑动跳转到不同的页面,可以使用Hammer这个js插件

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="/Scripts/jquery.specialevent.hammer.js"></script>
    <script src="/Scripts/hammer.js"></script>
<script type="text/javascript">
    var  actions = 'swipe';

    function hammerLog(event) {
        event.preventDefault();
        if (event.direction == "right")
        {
            window.document.location.href = "/zuihuo";
        }
        else if (event.direction == "left") {
            window.document.location.href = "/zuixin";
        }
    }
    $("body").on(actions, hammerLog);
</script>

这里的actions 可以通过空格隔开多个事件名称来实现多种触发事件。

不过这里有一个问题,如果不指定down和up事件的话,页面是不能滑动的,所以需要在Hammer.js文件里面修改一下,

drag : function(event)这个方法中加入

if(_direction=="up" || _direction=="down")
{
return;
}

即可跳过up和down事件。

还可以修改在某个滑动角度范围内触发事件。

https://files.cnblogs.com/dc-lancer/hammer.js.rar

posted @ 2013-01-29 17:24  DCLancer  阅读(296)  评论(0)    收藏  举报
(function() { var c = document.createElement('script'); c.type = 'text/javascript'; c.async = true; c.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'www.clicki.cn/boot/48212'; var h = document.getElementsByTagName('script')[0]; h.parentNode.insertBefore(c, h); })();