美文网首页
每天一点小积累--PC、Moblie事件兼容处理

每天一点小积累--PC、Moblie事件兼容处理

作者: 扭了个妞 | 来源:发表于2016-11-29 18:14 被阅读0次

今天时间比较紧, 做个小的笔记。主要是用来判断页面是在PC端还是在移动端,以应对不同的事件处理。当然,这里是应对简单的singlePage,大型移动端项目,繁琐触屏滑动逻辑还是需要插件支持。

废话不啰嗦,直接上干货。

(function($){
    window.appUtils = function(){
        var app = this;
        app.touchEvents = {
            start: app.support.touch ? 'touchstart' : 'mousedown',
            move: app.support.touch ? 'touchmove' : 'mousemove',
            end: app.support.touch ? 'touchend' : 'mouseup'
        };
    }
    appUtils.prototype.support = (function () {
        var support = {
            touch: !!(('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch)
        };              //重点就是判断打开文档设备是PC  还是 移动设备
        return support;
    })();
    window.utils = new appUtils();
})(jQuery)

唉,下班时间到了不回家的人,都有病!!需要治疗。

附赠下午写的小工具

$.fn.autoTab = function(options){
    var defaults = {
        tabTitle: '',
        tabCont:'',
        tabActive:'',
        tabNumber:0,
        tabClick:true,
        autoPlay:true,
        autoTime:1500
    },
    opt = $.extend({}, defaults, options),
    Showder = function(index){
        $(opt.tabTitle).eq(index).addClass(opt.tabActive).siblings(opt.tabTitle).removeClass(opt.tabActive);
        $(opt.tabCont).eq(index).show().siblings(opt.tabCont).hide();
    },
    timer;
    Showder(opt.tabNumber);
    $(document).on(utils.touchEvents.end,opt.tabTitle,function(){
        if(!opt.tabClick)return false;
        var index = $(this).index();
        opt.tabNumber = index;
        Showder(index);
    });
    if(opt.autoPlay){
        function autoPlay(){
            opt.tabNumber++;
            if(opt.tabNumber>=$(opt.tabTitle).length)opt.tabNumber = 0;
            Showder(opt.tabNumber);
        }
        timer = setInterval(autoPlay,opt.autoTime);
        $(this).on("mouseenter",function(){
            clearInterval(timer);
        })
        $(this).on("mouseleave",function(){
            timer = setInterval(autoPlay,opt.autoTime);
        })
    }
    
}

最后,知乎相关问题链接,点这里各路大神都有自己定制版的解决方案,距离大神的路 到底还有多远啊??哭 cry z·z·z···

相关文章

  • 每天一点小积累--PC、Moblie事件兼容处理

    今天时间比较紧, 做个小的笔记。主要是用来判断页面是在PC端还是在移动端,以应对不同的事件处理。当然,这里是应对简...

  • 事件兼容处理

    event = event? event: window.eventvar obj = event.srcElem...

  • 移动端

    移动端开发和 PC 端开发有哪些区别 移动端 考虑手机兼容性 使用触屏事件 布局自适应rem 动画处理CSS3 移...

  • pc兼容问题处理

    代码兼容:IE7及以上,360浏览器,搜狗浏览器,谷歌,火狐,欧朋等等。 一.需要注意的地方: 1.写好标准头: ...

  • construct2 问题 整理

    audio加载 方法 兼容性问题 表现:在PC端支持 reload 音频事件,会触发 all audio relo...

  • 拖动工具泡

    概述 一个拖动工具泡,拖动,点击触发事件,做了移动端与PC端兼容 展示: 涉及的点:1.事件绑定,删除事件,浏览器...

  • 学习笔记:DOM事件中的IE兼容性处理办法

    事件绑定兼容处理封装,由于.attrachEvent()方法中,this指向window,需要作如下处理: 解除事...

  • jQuery 事件

    事件 事件处理中最头疼的就是浏览器兼容问题,jQuery封装了很好的API,可以方便的进行事件处理。 在1.7之前...

  • jQuery的DOM事件

    jQuery的事件模型 提供了统一的事件处理方法,不需要再考虑兼容性问题 允许添加多个事件处理函数,jQuery内...

  • 事件对象及其兼容处理

    事件对象 把匿名函数定义的部分当做一个值赋值给oDiv的点击行为(匿名函数的函数表达式),当触发#div1的点击行...

网友评论

      本文标题:每天一点小积累--PC、Moblie事件兼容处理

      本文链接:https://www.haomeiwen.com/subject/qbqzpttx.html