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>