马黑黑 发表于 2022-4-29 12:18

判断点击了元素的左边还是右边

本帖最后由 马黑黑 于 2022-4-29 12:20 编辑 <br /><br /><style>

.mnBox { left: -214px; width: 1024px; height: 600px; background: #ccc; box-sizing: border-box; padding: 20px; cursor: pointer; position: relative; }
.line38 { height: 100%; width: 1px; position: absolute; left: 50%; top: 0; background: red;}
.mouse-tips { color: olive; }

</style>

<div class="mnBox">
        <div class="line38"></div>
        <div class="mouse-tips">单击检测鼠标位置</div>
</div>

<script>
let main = document.querySelector(".mnBox");
let tips = document.querySelector(".mouse-tips");

main.onclick = function(e) {
        e = e || event;
        let x = e.clientX - this.offsetLeft;
        let y = this.clientWidth;
        if(x > y / 2) {
                tips.innerText = "右边";
        } else {
                tips.innerText = "左边";
        }
}
</script>

马黑黑 发表于 2022-4-29 12:21

代码：
<style>

.mnBox { left: -214px; width: 1024px; height: 600px; background: #ccc; box-sizing: border-box; padding: 20px; cursor: pointer; position: relative; }
.line38 { height: 100%; width: 1px; position: absolute; left: 50%; top: 0; background: red;}
.mouse-tips { color: olive; }

</style>

<div class="mnBox">
        <div class="line38"></div>
        <div class="mouse-tips">单击检测鼠标位置</div>
</div>

<script>
let main = document.querySelector(".mnBox");
let tips = document.querySelector(".mouse-tips");

main.onclick = function(e) {
        e = e || event;
        let x = e.clientX - this.offsetLeft;
        let y = this.clientWidth;
        if(x > y / 2) {
                tips.innerText = "右边";
        } else {
                tips.innerText = "左边";
        }
}
</script>


红影 发表于 2022-4-29 15:05

这个倒是真的不会判断错呢，有意思{:4_173:}

马黑黑 发表于 2022-4-29 15:44

红影 发表于 2022-4-29 15:05
这个倒是真的不会判断错呢，有意思

这个用处很大

红影 发表于 2022-4-29 23:03

马黑黑 发表于 2022-4-29 15:44
这个用处很大

看到你后面用左右来翻页也是用的这个吧。

马黑黑 发表于 2022-4-30 08:39

红影 发表于 2022-4-29 23:03
看到你后面用左右来翻页也是用的这个吧。

没有，它没有判断38线

加林森 发表于 2022-4-30 17:53

来学习

红影 发表于 2022-4-30 22:17

马黑黑 发表于 2022-4-30 08:39
没有，它没有判断38线

38线，这话好玩{:4_173:}

马黑黑 发表于 2022-4-30 22:48

红影 发表于 2022-4-30 22:17
38线，这话好玩

左右各半，中间的线就是三八线的，你看我的CSS类选择器，.line38

红影 发表于 2022-5-2 08:38

马黑黑 发表于 2022-4-30 22:48
左右各半，中间的线就是三八线的，你看我的CSS类选择器，.line38

这还是延续读书时的说法的吧{:4_173:}

马黑黑 发表于 2022-5-7 07:53

红影 发表于 2022-5-2 08:38
这还是延续读书时的说法的吧

是的吧
页: [1]
查看完整版本: 判断点击了元素的左边还是右边