vml 元素周围的虚拟区域答案

【问题标题】：Virtual area around vml elementvml 元素周围的虚拟区域
【发布时间】：2013-02-08 16:32:59
【问题描述】：

这是我的第一篇文章，如果出现问题，我最深切的借口:)

我有一点 html 控件要写，最大的问题是 ie6-8 支持。根本没有其他方法可以跳过 ie6-8 支持 :( 所以在搜索了一段时间后，我确实找到了 Raphael，它允许我创建在 SVG 文件中定义的自定义形状。我需要附加“鼠标悬停”事件并在悬停时选择元素. 事件运行良好，但我确实在 VML 悬停行为中发现了大问题。

代码被简化为带有 VML 形状的 RAW html。

<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
    <style>v\: * { behavior:url(#default#VML); antialias: false; }</style>
</head>
<body>
    <div id="message">hovered: nope</div>
    <v:oval id="oval" style="width:100px; height:75px" fillcolor="#bbb"></v:oval>

    <script>
        var messageElm = document.getElementById('message');
        var ovalElm = document.getElementById('oval');

        ovalElm.attachEvent('onmouseover', function () { messageElm.innerText = 'hovered: yep'; });
        ovalElm.attachEvent('onmouseout', function () { messageElm.innerText = 'hovered: nope'; });
    </script>
</body>
</html>

如果您尝试将鼠标移动到椭圆形元素上，您会注意到呈现的形状与悬停形状不同。我的意思是，悬停会从渲染形状触发 2-3px（不是从每一侧）。

所以问题是：如何禁用该虚拟区域（如果可能的话）？

【问题讨论】：

标签： internet-explorer-8 internet-explorer-7 internet-explorer-6 raphael vml

【解决方案1】：

我遇到了同样的问题，我尝试了 usemap；

首先我在覆盖 vml 的透明 png8 上创建一个地图

    this.dom.insertAdjacentHTML("AfterBegin",'<map name="'+_id+'"></map><img id="'+_id+'" src="'+transparent.png+
        '" style="position:absolute;width:'+dom.clientWidth+';height:'+dom.clientHeight+'" />');
    var map = this.dom.getElementsByTagName('map')[0];
    this.dom.appendChild(map);
    this.map = map;

然后将形状附加到一个区域；映射它；我只做了多边形演示；

function _getMap(shape){
    this._map = this._map || {};
    if(this._map[shape.id]){

    }else if(shape.nodeName == 'shape'){
        var arrDots = shape.childNodes[0].v.match(/(\d+),(\d+)/g)
        this._map[shape.id] = _polyMap(arrDots);    
    }
    return this.map[shape.id]

}
function _polyMap(arrDots){
    var map = this.map;
    var area = document.createElement('area');
    area.setAttribute('shape',"poly");
    area.setAttribute('coords',arrDots.join(','));
    area.setAttribute('href','##');
    area.setAttribute('alt','##');
    map.appendChild(area);
}

然后就可以绑定事件了；

function  _onIE(shape, evtname, fn){
    this._getMap(shape).attachEvent('on'+evtname, fn);
}

【讨论】：