vue的鼠标点击事件和悬停事件

Posted 2022-11-24 程码工

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>