移动端:active伪类无效的解决方法

解决方法

  • Safari Mobile 默认不使用:active 状态,除非元素上或上有一个touchstart 事件处理器。

    1
    <body ontouchstart=""> <!-- Hack to activate :active CSS selector on iOS browsers.-->
  • body添加touchstart事件。

    1
    document.body.addEventListener('touchstart', function () { //...空函数即可});

参考资料

监听文档是否处于激活状态

解决方法

使用H5新的监听文档可见状态事件visibilityChange判断当前页面是否处于激活状态

visibilityChange事件触发条件

  • PC端浏览器的标签页切换。
  • PC端浏览器最大化最小化,Opera例外。
  • 移动端锁屏。
  • 移动端进入后台和进入前台。
  • 移动端浏览器TAB切换。
  • 方式一

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    var hiddenProperty = 'hidden' in document ? 'hidden' :
    'webkitHidden' in document ? 'webkitHidden' :
    'mozHidden' in document ? 'mozHidden' :
    null;
    var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
    var onVisibilityChange = function(){
    if (document[hiddenProperty]) {
    console.log('页面非激活');
    }else{
    console.log('页面激活');
    }
    }
    document.addEventListener(visibilityChangeEvent, onVisibilityChange);
  • 方式二

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    // 设置隐藏属性和改变可见属性的事件的名称
    var hidden, visibilityChange;
    if (typeof document.hidden !== "undefined") { // Opera 12.10 and Firefox 18 and later support
    hidden = "hidden";
    visibilityChange = "visibilitychange";
    } else if (typeof document.msHidden !== "undefined") {
    hidden = "msHidden";
    visibilityChange = "msvisibilitychange";
    } else if (typeof document.webkitHidden !== "undefined") {
    hidden = "webkitHidden";
    visibilityChange = "webkitvisibilitychange";
    }
    function handleVisibilityChange() {
    if (document[hidden]) {
    // 非激活状态
    } else {
    //页面激活
    }
    }
    document.addEventListener(visibilityChange, handleVisibilityChange, false);

参考资料