一张图片或Div不同位置点击事件
一张图片或Div不同位置点击事件
骤雨重山
发布于 2022-01-17 01:54:22
发布于 2022-01-17 01:54:22
代码可运行
运行总次数：0
代码可运行
代码示例
<!--
* @Author: Han
* @Date: 2021-10-27 17:34:01
* @LastEditors: Han
* @LastEditTime: 2021-10-27 17:36:35
* @FilePath: \Projectc:\Users\Han\Desktop\Untitled-1.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一张图片或Div不同位置点击事件</title>
<style>
div {
position: relative;
margin: 100px auto;
width: 332px;
height: 332px;
border: 1px solid black;
}
div::before,
div::after {
content: '';
position: absolute;
background: black;
}
div::before {
height: 1px;
width: 100%;
top: 166px;
}
div::after {
height: 100%;
width: 1px;
left: 166px;
}
</style>
</style>
</head>
<body>
<div>
</div>
<script>
const btn = document.querySelector('div');
btn.onclick = function (e) {
alert(`点击了${e.offsetX >= 166 ? '右' : '左'}${ e.offsetY >= 166 ? '下' : '上'}`)
};
</script>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-10-19，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
推荐阅读
相关推荐
canvas实现在线签名
更多 >
💥开发者 MCP广场重磅上线！
精选全网热门MCP server，让你的AI更好用 🚀
腾讯云开发者
