Question

这是我的第一篇文章，所以如果出现问题我会找到最深的借口：）

我有一个小的html控件写，最大的问题是ie6-8支持。没有其他选择可以跳过ie6-8支持:(所以经过一段时间的搜索，我确实找到了拉斐尔，它允许我创建在SVG文件中定义的自定义形状。我需要附加'mouseover'事件并在悬停时选择元素事件工作得很好但我确实在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（不是从每一侧）。

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

Answer 1

我有同样的问题，我尝试使用usemap;

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

    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;

然后将形状附加到一个区域;映射它; 我只制作了poly demo;

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);
}

vml元素周围的虚拟区域

1 个答案: