如何在单击div/image的特定区域时运行不同的Javascript函数

我想知道是否可以在单击div/图像的不同区域时运行不同的Javascript函数

例如，如果我有一个尺寸为100px X 100px的图像，我想在用户单击图像左上20%的位置时显示一个警报，即，如果用户在图像顶部下方0%到20%和图像左侧0%到20%之间的区域内单击，是否可能

如果是这样的话，如果用户在图像顶部下方30%-40%和左侧50-60%之间的区域内单击，我是否可以使用不同的警告消息运行不同的Javascript警报功能

我需要使用高度和宽度的百分比来定义区域，而不是明确定义像素数

---

这样做可能吗？如果可能，是否需要库来检测光标/触摸的位置？

您可以在单击事件上使用位置功能。 如果您的图像id=myImage，则可以执行以下操作：

$("#myImage").click(function(e) {
    var horizpercent = 20;
    var vertpercent = 20;
    var posX = e.pageX - $(this).position().left;
    var posY = e.pageY - $(this).position().top;
    var width = $(this).width();
    var height = $(this).height();
    if (posX < width * horizpercent / 100 && posY < height * vertpercent / 100) {
        alert('ye')
    }
});

---

解决方案是在图像元素上创建多个覆盖

<div class="ovrl-container">
    <img src="..." alt="...">
    <div class="ovrl ovrl1"></div>
    <div class="ovrl ovrl2"></div>
    <div class="ovrl ovrl3"></div>
</div>

---

我认为最好的方法是将图像设置为主div/容器的背景，然后使用display:flex属性，将div放入容器中，以所需的百分比设置宽度和高度。然后可以将事件侦听器添加到每个div：

<div class="container" style="display: flex">
<div id="left-ear" style="height: 20%; width: 30%" onClick="event"></div>
<div id="space-inbetween-ears" [same height and width= 100 - (leftearWitdh 
x2)></div>
<div id="right-ear..." [same as leftEar] onClick="event"></div>
</div>

---

类似这样的东西…

一个无jQuery的实现可能是这样的：

$("#myImage").click(function(e) {
    var horizpercent = 20;
    var vertpercent = 20;
    var posX = e.pageX - $(this).position().left;
    var posY = e.pageY - $(this).position().top;
    var width = $(this).width();
    var height = $(this).height();
    if (posX < width * horizpercent / 100 && posY < height * vertpercent / 100) {
        alert('ye')
    }
});

var click=document.getElementByIdclick； click.onclick=函数evt{ var xOff=click.offsetLeft； var yOff=click.offsetTop； var clickedX=evt.pageX-xOff； var clickedY=evt.pageY-yOff； click.innerHTML=`单击相对位置：${clickedX}，${clickedY}`； }; 一些随机高度

---

您是否考虑过在图像上放置一些div元素？将单击事件指定给这些元素。。。。或者可以尝试跟踪鼠标的x/y位置，并计算其在图像中的位置？是的，这是可能的。到目前为止，您尝试了什么？您必须在图像div元素平铺的顶部添加事件侦听器，或者动态计算每次单击图像并显示警报。若可能，您可以在鼠标单击时添加事件侦听器并检测目标元素。然后你可以得到目标元素的位置，计算出你想要的位置，并与鼠标事件的位置进行比较。看一下图像地图和区域标记，虽然我不知道坐标是否支持百分比值。你还应该提到你的答案是使用一个库。。。。jQuery，因此解释如何包含该库是相关的，这样OP至少可以尝试您的解决方案。。。。jQuery没有标记，因此提供jQuery解决方案来解释如何链接到库是明智之举，不要假设每个人都知道如何做。这可能正是它没有被标记的原因。哦，是的，如果有人使用常规的旧javascript，我总是假设jquery：到这里下载jquery min并将其包含在布局中