1

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

我有一点 html-control 要写，最大的问题是 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。

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

4

1 回答 1

0

我有同样的问题，我尝试了 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);
}
于 2013-09-25T10:27:08.113 回答