如何解决在 img 上使用 object-fit 时单击图像外的事件
我想这是不可能的，但想仔细检查一下： 如果我有一个适合对象的图像：包含；然后单击图像外部（在背景上）但仍在 img 框架内 - 有没有办法让点击事件绕过 img，就像我在 img 框架外部单击一样？
像这样？ 谢谢！
document.querySelector('.behind').addEventListener('click',e=> {
alert('this will never happen :(')
})body {
margin:0;
}
img {
width:100vw;
height:100vh;
object-fit:contain;
}
.behind {
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background-color:red;
z-index:-1;
}<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1">
<title>A Great Demo on CodePen</title>
</head>
<body>
<div class="behind">
</div>
<div class="image">
<img src="https://picsum.photos/600/600">
</div>
</body>
</html>解决方法
在没有 object-fit 的情况下做不同的事情
document.querySelector('.behind').addEventListener('click',e => {
alert('this will never happen :(')
})body {
margin: 0;
}
img {
max-width:100%;
max-height:100vh;
display:block;
margin:auto;
position: fixed;
top: 0;
left: 0;
bottom:0;
right:0;
}
.behind {
width: 100%;
height: 100vh;
background-color: red;
z-index: -1;
}<div class="behind">
</div>
<img src="https://picsum.photos/600/600">版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。