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

最新推荐文章于 2024-08-23 14:40:40 发布

程知农

最新推荐文章于 2024-08-23 14:40:40 发布

阅读量1.9w

点赞数 8

分类专栏： IT_前端开发_Web 文章标签： vue.js javascript

本文链接：https://blog.csdn.net/C201008/article/details/113336089

版权

IT_前端开发_Web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue中通过结合鼠标进入和离开事件来模拟悬停效果。示例代码展示了如何在表格元素上监听这些事件，并利用getBoundingClientRect()方法获取元素尺寸信息。文章强调了onClick、onEnterTd和onLeaveTd方法在事件处理中的作用。

摘要由CSDN通过智能技术生成

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>