[踩坑]vue中mouseup选中文本和click点击事件冲突，阻止冒泡不生效

需求：
dom元素绑定了click事件，但是在选中文本的时候，不能触发click点击事件

例：

<div @click="openDetail">这里是可以选中复制的文字</div>

以上代码，选中dom中的文本时，会触发openDetail方法；

理想状态：
一开始以为很简单，选中文本松开鼠标后会触发mouseup事件，给mouseup加阻止冒泡是不是就行了

<div @click="openDetail" @>这里是可以选中复制的文字</div>

测试表明，仅仅这样并不能解决问题；

解决思路：
1.绑定mousedown和mouseup，分别记录触发时的时间戳；
2.获取选中文本；
3.鼠标点击和抬起的时间差<200，或者选中文本为空时，可以触发点击事件，否则就是选中文本；

具体方法：

<div @click="openDetail" @mousedown="mouseDownFn" @mouseup="mouseUpFn">
	这里是可以选中复制的文字
</div>

data中定义变量：

data: function() {
	return {
		clickObj: {
			firstTime: '', // mousedown的时间戳
			lastTime: '', // mouseup的时间戳
			selectionTxt: '', // 选中的文本
			isClick: false, // false--禁止点击，true--可点击
		}
	}
}

methods方法定义：

methods: {
	mouseDownFn: function () {
	    this.clickObj.firstTime = new Date().getTime()
    },
    mouseUpFn: function () {
    	this.clickObj.lastTime = new Date().getTime()
    	// 获取选中文本
        this.clickObj.selectionTxt = window.getSelection().toString()
        // 鼠标点击和抬起的时间差<200，或者选中文本为空时，可以触发点击
        if((this.clickObj.lastTime - this.clickObj.firstTime) < 200 
        	|| $.trim(this.clickObj.selectionTxt) == ''){
            this.clickObj.isClick = true
        } else {
            this.clickObj.isClick = false
       	}
    },
    openDetail: function () {
    	if (!this.clickObj.isClick) return
        this.clickObj.firstTime = ''
        this.clickObj.lastTime = ''
        this.clickObj.isClick = false
        if($.trim(this.trClick.selectionTxt) != '') {
        	this.trClick.selectionTxt = ''
        	return
        }
        // .....
    }
}