利用html热区技术监听图片点击事件

需求

通过监听点击图片的某个范围绑定事件。

如何设置html热区？

利用img结合map和area标签锁定热区

HTML 属性 与 属性一起使用来定义一个图像映射(一个可点击的链接区域).

使用方式

在线图片坐标拾取工具

https://tooltt.com/img-coord/

map

我们需要在img设置usemap来与map标签确定绑定关系. 如以上使用的是front绑定两者关系

area

shape 属性用于定义图像映射中对鼠标敏感的区域的形状：

• 圆形（circ 或 circle）
• 多边形（poly 或 polygon）
• 矩形（rect 或 rectangle）

coords 给热点区域设定具体的坐标值。

• 这个值的数值和意义取决于这个值所描述的形状属性。
• 对于矩形或长方形, 这个coords值为两个X,Y对：左上、右下。
• 对于圆形, 这个值是 x,y,r ，这里的 x,y 是一对确定圆的中心的坐标而 r 则表示的是半径值.。
• 对于多边和多边形，这个值是用x,y对表示的多边形的每一个点：x1,y1,x2,y2,x3,y3,等等。

area标签还可以绑定href来实现热区点击跳转, 但这部分我需求没用到, 可以给热区域绑定id, 来结合业务需求实现功能, 如我是用热区域id绑定了点击事件

更多扩展属性, 可看这里

所以结合以上的例子来看, 我使用的热区域形状是矩形, 并且指定了热区矩形左上角的x1,y1和右下角的x2,y2坐标来确定热区范围的

扩展

点击不同热区锁定到不同input焦点

主要是两点

1. 确定热区和input的联系

如我需求中可通过索引确定两者联系, 即左上第一个热区对应的是列表第一行表单.

2.通过索引绑定焦点

这里关键点是用jquery获得索引对应的input标签对象, 再使用focus焦点事件锁定焦点

    //车头热区点击事件
    $('#front area').click(function(event){
        //area热区id
        let {id} = event.currentTarget;
        let carFrontTireArea = constantsExt.carFrontTireArea[id];
        let {text,num} = carFrontTireArea;
        const focusTd = $('#editTable tbody tr').eq(num-1)[0];
        const custLidInput = $(focusTd).find('td[data-field="custLid"] input')[0];
        custLidInput.focus();
    });

当然, 如果想要焦点更直观, 我们可以利用css伪类给获取焦点时的input加点css效果:

    input:focus
    {
        background-color: yellow;
    }