关于javascript:绕着弯儿的实现需求前端的快乐如此简单

前言

当产品提出一个新的需要，你的第一反馈是不是皱眉头 ? 听完当前又心想“easy”，而后勉为其难的挤出几个字“能够吧”? 产品问工期，你会 少说一两天，多说那就没谱了，周末前吧，体现出需要不简略的样子 ? 其实这时心里曾经有了实现的大框 …
于是产品前脚刚走，你就卯足了劲撸码，巴不得两分钟实现

而后在撸码的路线上走着走着会发现因为种种原因（技术选型、插件限度，改变太大 …）导致此路不通，于是咱们又要另辟蹊径，绕着弯儿的实现需求

需要

现有性能 ：点击图中所画区域，弹窗显示具体信息，这里用到的是高德地图提供的信息窗体 对其自定义实现的弹窗

新增需要 ：点击弹窗后，鼠标划到其余区域，弹窗显示该区域具体地址

实现

想法一

乍一看需要，easy, 高德地图这不就有现成的信息窗口弹窗吗，用起来

只有代码搭的好，二次开发不费劲（代码不怎么样，但这是实打实的情理，哈哈），照猫画虎，给鼠标划入加了弹窗，接下来看成果

有个大问题，划入和点击都用到高德的信息窗口这个 api，然而他没有提供同时关上多个的办法，所以当我点击弹窗当前只有滑动就会触发划入弹窗导致点击弹窗隐没；

还有一个小问题是，我点击的弹窗批改了默认弹窗款式，而我划入弹窗又不想要点击弹窗的款式，同时不须要敞开按钮，然而他们共用同样的 class 名，将敞开按钮暗藏 两个弹窗都会暗藏，当然这个小问题略微绕点圈子加个判断即可解决，只是稍显麻烦 …

总之这个办法离瑕疵太多

想法二

点击弹窗多难看，信息又全，要害还简略，同样的代码我 cv 就好了，劝劝产品经理吧

“咱不要点击弹窗了，都划入弹窗显示所有信息吧”，“太大了不难看，而且盖住其余区域了你不好划入”

实际才是测验真谛的唯一标准，看成果

氛围有点难堪 …

那能怎么办，持续捣鼓吧

想法三

本人写一个追随鼠标滑动的弹窗，监听鼠标 move 事件，判断划入划出所渲染的区域内管制是否显示

1. 写一个自定义的满足要求的 div 作为弹窗，留神肯定要相对定位，默认不显示

2. 页面加载实现后绑定匿名函数实现 div 追随鼠标挪动

   window.onload = function () {var box = document.getElementById("info_tit");
     document.onmousemove = function (event) {
    // 解决兼容问题
    event = event || window.event;
    // 获取滚动条滚动的间隔
    // chrome 浏览器认为滚动条是 body 的，火狐等浏览器认为滚动条是 html 的
    var st = document.body.scrollTop || document.documentElement.scrollTop;
    var sl = document.body.left || document.documentElement.scrollLeft;
    // 获取鼠标的坐标
    var left = event.clientX;
    var top = event.clientY;
    // 设置 div 偏移量
    box.style.left = left + sl + 15 + "px";
    box.style.top = top + st - 40 + "px";
     };
   }

3. 鼠标移入区域内显示对应的内容，移出暗藏

看成果

故事到此结束 …

总结

条条大路通罗马，但通往罗马的路不总是层峦叠嶂

奉上壁纸图

翻译一下：
“三思而后行”