vue的鼠标点击事件和悬停事件
vue没有悬停事件，可以使用鼠标进入事件和鼠标离开事件的组合来代替。
<template>
<div>
<table style="width: 320px; height: 320px; border: 1px solid #999999;" rules="all" @click="onClick">
<tr v-for="rowN in 4">
<td v-for="colN in 4" style="text-align: center;" @mouseenter="onEnterTd" @mouseleave="onLeaveTd">{{rowN
+ "-" + colN}}</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data() {
return {
}
},
watch: {
},
mounted() {
},
methods: {
//鼠标点击的事件。
onClick(e) {
// 相关知识点：
// e.target 是你当前点击的元素。
// e.currentTarget 是你绑定事件的元素。
// 举个例子 假如onClick是绑定在table元素上 那么 e.target是你当前点击的td元素 而e.currentTarget是table元素。
// getBoundingClientRect()方法返回的是一个矩形对象 它包含四个属性（left、top、right和bottom） 分别表示该元素四边与页面上边和左边的距离。
var rect = e.currentTarget.getBoundingClientRect();
console.log("track_onClick_" + (rect.right - rect.left) + "_" + (rect.bottom - rect.top));
},
//鼠标进入的事件。
onEnterTd(e) {
var rect = e.currentTarget.getBoundingClientRect();
console.log("track_onEnterTd_" + (rect.right - rect.left) + "_" + (rect.bottom - rect.top));
},
//鼠标离开的事件。
onLeaveTd(e) {
var rect = e.currentTarget.getBoundingClientRect();
console.log("track_onLeaveTd_" + (rect.right - rect.left) + "_" + (rect.bottom - rect.top));
}
}
}
</script>
<style>
</style>
| 
转播
