点击div时判断点击在左边还是右边？

最新推荐文章于 2022-12-31 13:45:59 发布

weixin_48882642

最新推荐文章于 2022-12-31 13:45:59 发布

阅读量434

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_48882642/article/details/127704760

版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言
一、代码部分
二、效果图
总结

前言

在网上看了一些关于监听点击事件的，然后自己写了一个鼠标点击div时，判断是点击在左边还是右边。废话不多说，直接上菜

提示：以下是本篇文章正文内容，下面案例可供参考

一、代码部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击div时判断点击位置是左还是右</title>

    <style>
        .box {
            width: 300px;
            height: 120px;
            background: #4e92e1;
            margin: auto;
            padding: 0 auto;
            text-align: center;
            line-height:120px;
        }
    </style>
    <script>
        function fun(dom) {
            //距离左边屏幕距离
            var leftLength = dom.getBoundingClientRect().left;

            //当前鼠标点击距离左边屏幕的位置
            var clickWidth=event.clientX;
            //本元素所占的宽多少
            var this_width = dom.clientWidth;

            //点击位置-本div距离左边距离 = 点击在本div中的位置
            var x = clickWidth - leftLength;

            if((this_width/2) > x){
                alert("左边")
            } else {
                alert("右边")
            }
        }
    </script>
</head>
<body>
    <div class="box" onclick="fun(this)">
        div盒子
    </div>

</body>
</html>

二、效果图

展示原始效果
点击div的左侧的时候
点击div右侧时

总结

以上就是今天要讲的内容，本文仅仅简单做个小功能。

weixin_48882642

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
点击div时判断点击在左边还是右边？

在网上看了一些关于监听点击事件的，然后自己写了一个鼠标点击div时，判断是点击在左边还是右边。废话不多说，直接上菜提示：以下是本篇文章正文内容，下面案例可供参考以上就是今天要讲的内容，本文仅仅简单做个小功能。
复制链接

扫一扫