迅雷和图片热区<MAP><AREA>的冲突

最新推荐文章于 2020-12-21 10:18:09 发布

原创最新推荐文章于 2020-12-21 10:18:09 发布 · 184 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#浏览器 #HTML #Web

UI 专栏收录该内容

122 篇文章

订阅专栏

本文探讨了迅雷浏览器插件与HTML图片热区功能之间的冲突问题，介绍了冲突产生的原因在于迅雷插件对同一元素重复注册事件监听器，导致CPU占用率激增。文中提供了一种解决方案，通过在<AREA>元素上添加事件取消冒泡属性，有效避免了该问题。

迅雷和图片热区<MAP><AREA>的冲突

网上找到这个问题，记录一下：
<img id="SecurePad" style="Z-INDEX:10; LEFT:0px; POSITION:absolute; TOP:0px;visibility:hidden" src="abc.jpg" usemap="#SecurePadMap" border="0" class="tm">
<map name="SecurePadMap">
<area shape="rect" coords="9,32,36,57" >
<area shape="rect" coords="45,32,71,57" >
<area shape="rect" coords="79,32,106,57" >
</map>

这是一段很普通的html代码。map+area可以把一张图片虚拟的分成n个部分，然后对每个area都可以添加事件处理函数。

可是如果安装了web迅雷之后，打开这样的网页会导致CPU 100%, 并且最终挂起 (process hang).
调试的时候发现这样一个stack:
0012dd8c 7e27ca97 msvcrt!TrailUpVec+0x6c
0012ddac 7e279a9a mshtml!CImplAry::InsertIndirect+0x48
0012dde4 7e2799cb mshtml!CAttrArray::Set+0x1ee
0012de08 7e2db3ad mshtml!CAttrArray::Set+0x4a
0012de3c 7e2db34d mshtml!CBase::AddUnknownObjectMultiple+0x2e
0012de6c 7e2db3e6 mshtml!CBase::DoAdvise+0xd7
0012de8c 100034c5 mshtml!CConnectionPt::Advise+0x30
0012dea8 10003fea WebThunderBHO_Now+0x34c5
0012df04 100059e4 WebThunderBHO_Now+0x3fea
0012df30 7e3213cf WebThunderBHO_Now+0x59e4
0012e030 7e27dfd6 mshtml!CBase::InvokeEvent+0x3d4
0012e168 7e2afe85 mshtml!CBase::FireEvent+0x105
0012e1d4 7e456b2f mshtml!CElement::BubbleEventHelper+0x26d
0012e1fc 7e312fdd mshtml!CImgElement::DoSubDivisionEvents+0x5a
0012e250 7e2b044d mshtml!CElement::BubbleEventHelper+0xb8
0012e388 7e2ebafe mshtml!CElement::FireEvent+0x26c
0012e4a0 7e2ebfd3 mshtml!CElement::FireStdEvent_MouseHelper+0x241
0012e528 7e2f655a mshtml!CElement::FireStdEventOnMessage+0x64c
0012e5b0 7e2e8daa mshtml!CDoc::PumpMessage+0x48c
0012e6fc 7e2e7d28 mshtml!CDoc::OnMouseMessage+0x3b6
当<AREA>元素接收到鼠标移动的消息时，WebThunderBHO_Now作为注册的浏览器帮助对象（BHO）被调用。WebThunderBHO_Now的一个动作就是通过调用IConnectionPoint接口的Advise方法，在<AREA>元素和WebThunderBHO_Now建立一个通知连接。
对某个HTML元素添加通知连接本身并没有问题，而且这也是BHO截获HTML事件的通用方法。但是迅雷却对同一个元素建立了多个通知连接。这个逻辑过程是：

在<AREA>元素第一次接收到鼠标移动信息的时候，可能只有一个通知连接，但是WebThunderBHO_Now会添加一个新的，当<AREA>元素第二次接收到鼠标移动信息的时候，WebThunderBHO_Now会被调用两次，调用两次就意味着添加两个新的连接，结果就是四个。这样通知连接就在很短时间内迅速增长。可以到达几万，几十万。这个时候，每次鼠标移动或点击的时候都会导致进程CPU高占用率，并且有挂起的现象。

遇到这个问题，将代码修改为：
<area shape="rect" coords="33,34,74,98" href="${ctxPath}/${local }html/faq_new.html#faq1" onclick="event.cancelBubble=true;" onmouseover="event.cancelBubble=true;" onmousedown="event.cancelBubble=true;" onmousemove="event.cancelBubble=true;" onmouseup="event.cancelBubble=true;"/>

在后面增加了很多事件
onclick="event.cancelBubble=true;"
onmouseover="event.cancelBubble=true;"
onmousedown="event.cancelBubble=true;"
onmousemove="event.cancelBubble=true;"
onmouseup="event.cancelBubble=true;"

阻止了迅雷的调用。修复了这个问题。