vue移动端h5伪类active没有效果问题

设置伪类:active样式以后，点击按钮发现没效果，仔细研究发现是click事件在点击态没有出现的时候就触发了，如果没有绑定click，或者click里没有进行页面跳转、dom节点删除等操作的话还是可以看到点击态的，尤其特别的是，自定义组件中不会有这个问题，因为在自定义组件中click以后emit将事件向组件调用者传递，vue的事件触发、事件分发系统是有时间延迟的，有了时间延迟也就看到了点击态。

 

vue项目解决方案

自定义clicked指令，路径./directives/clicked.js

/*
    自定义指令：clicked

    使用方法：

        <button v-clicked @clicked="handleClick"></button>

        要点：
            1:使用v-clicked指令
            2:监听clicked事件

    适用场景：
        vue 在移动端监听click事件的时候，click在点击态出现前就触发了，
        如果回调中有dom删除、页面跳转等操作，导致点击态还没来得及出现，
        就页面切换或者删除dom节点了
 */
import Util from "../util/index.js";

const EVENT_NAME = "clicked";

function emit(el){
    /*
        令节点触发clicked事件
     */
    if(el && el.dispatchEvent){
        let evt = document.createEvent("HTMLEvents")
        evt.initEvent(EVENT_NAME,false,false)
        el.dispatchEvent(evt)
    }
    else {
        console.error("invalid el for no dispatchEvent method found.",el)
    }
}

class EmitterProxy {

    /*
        click事件代理器
     */

    constructor(el){
        this.el = el;
    }

    click(){
        if(Util.isPhone()){
            setTimeout(this.emit.bind(this), 200);
        }
        else{
            this.emit()
        }
    }

    on(){
        /*
            事件监听接口，由子类实现

            子类需要监听click事件，将this.click作为click事件监听器，
            将click事件触发以后的逻辑委托到this.click处理
         */
        // do nothing
    }

    emit(){
        /*
            事件触发接口，由子类实现

            子类需要在此接口中实现触发clicked事件的具体逻辑
         */
        // do nothing
    }
}

class EmitterProxy4HtmlElement extends EmitterProxy {

    /*
        针对原生html元素的click事件代理器
     */

    constructor(el){
        super(el)
    }

    on(){
        this.el.addEventListener("click",this.click.bind(this))
    }

    emit(){
        emit(this.el)
    }
}

class EmitterProxy4Vnode  extends EmitterProxy {

    /*
        针对Vue生成的Vnode的 click事件代理器
     */

    constructor(vnode){
        super(vnode.componentInstance)
    }

    on(){
        this.el.$on("click",this.click.bind(this))
    }

    emit(){
        this.el.$emit(EVENT_NAME,{})
    }
}

export default {
    install( Vue ){
        Vue.directive(EVENT_NAME, {
            // 只调用一次，指令第一次绑定到元素时调用
            bind: function (el, _, vnode) {
                /*
                    监听click事件，通过事件代理，在click事件触发的时候，
                    判断是否在移动端，是的话，延迟200ms触发clicked事件，
                    否则立即触发clicked事件，用户通过监听clicked事件来
                    等待click和点击态的完成
                 */
                let emitter = new EmitterProxy4HtmlElement(el)
                if(vnode && vnode.componentInstance){
                    emitter = new EmitterProxy4Vnode(vnode)
                }
                emitter.on()
            }
        })
    }
};

使用指令：

import Vue from 'vue'

import Clicked from "./directives/clicked.js";
Vue.use(Clicked);

<button v-clicked @clicked="handleClick"></button>