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

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

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2022-4-29 12:20 编辑

单击检测鼠标位置

马黑黑 · 发表于 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>