javascript - 事件监听器点击不适用于 ejs 文件
问题描述
我正在尝试创建一个代码,如果您单击屏幕(地图)上某个位置的特定部分,则返回地图的位置和附近最近的餐厅。
但显然,我的 eventListener 实现不起作用。
这是我的 myinfo.ejs。
<link rel="stylesheet" href="/views/style.css">
<link rel=stylesheet href="../views/myinfo.css" />
<div class="basic">
<div class="photo"><img class="photo1" src="../images/profile/<%= session.image%></div>
<div class="photo">
</div>
<div class="intro">
ID: <% for (var i = 0; i < 5; i++) { %>
  <% } %>
<span class="intronb"><%= session.user %> </span> <br /> <br />
이름: <% for (var i = 0; i < 5; i++) { %>
  <% } %> <span class="intronb"><%= session.name %></span>
</div>
<div class="group">
<div class="visited">
이번 달 방문한 횟수는
</div>
<div class="rank">
등수.
</div>
<div class="favourite">
한식.
</div>
</div>
<div class="displaytext">
선택된 음식점: <div class="rt"></div>
</div>
<div class="map">
ABadfafasf
</div>
<script src="../views/click.js"> </script>
</div>
</html>
这是我的javascript代码。点击.js。
let clickArea = document.querySelector('.map');
console.log("hi" + clickArea); //this Works. returns hi[object HTMLDivElement] but the problem is that getClickPosition seems like it doesn't run. or maybe clickArea.addEventListener.
let rtname = document.querySelector('.rt');
clickArea.addEventListener("click", getClickPosition, false);
function getClickPosition(e) {
var xpos= e.clientX;
var ypos = e.clientY;
console.log(xpos + " " + ypos);
var restaurants = [["chicken", [500, 600]]];
for (var i = 0; i < restaurants.length; i++) {
if (abs(xpos - restaurants[i][1][0]) < 5 && abs(ypos - restaurants[i][1][0] < 5)) {
rtname.innerHTML = restaurants[i][0];
}
}
}
已将地图大小更改为整个屏幕以检查它是否是 div 的大小,但仍然无法正常工作。我该如何解决这个问题?
解决方案
推荐阅读
- aws-api-gateway - 将 json 转换为字符串速度模板
- python - 从 python 到 c++ 的回调选项
- python - Django Python Makemigrations 和 Runserver 什么都不做
- html - Facebook 爬虫/抓取特定端口
- c - Valgrind 没有显示错误
- .net - 仅在远程桌面窗口打开时在本地和 TeamCity 上通过易碎测试
- java - 我正在为以下休眠代码获取 StringIndexOutOfBoundException
- javascript - 如何在 D3 中引用动态对象?
- python - 将键绑定发送到终端 Ipython VSCode
- python - 通过 PyCharm 中的正则表达式搜索和替换操作注释掉特定的 Python 代码