Question

我有一个VML形状，我试图阻止浏览器导航到href：

<!DOCTYPE html>
<html>
    <head>
<style type="text/css">
#a, #b {
    position: absolute;
    top: 10px;
    width: 100px;
    height: 100px;
    display: block;
}
#a {
    left: 10px;
    background: red;
}
#b { left: 120px; }
</style>
<script type="text/javascript">

(function() { 

document.namespaces.add('v', 'urn:schemas-microsoft-com:vml', '#default#VML');

window.onload = function() {

    var a = document.getElementById('a');
    a.attachEvent('onclick', function(e) {
        console.log('A');
        e.returnValue = false;
        return false;
    });

    var b = document.getElementById('b');
    b.attachEvent('onclick', function(e) {
        console.log('B');
        e.returnValue = false;
        return false;
    });

};

})();
</script>
    </head>
    <body>
        <a id="a" href="/foo"></a>
        <v:rect id="b" href="/bar"><v:fill color="#0000ff" /></v:rect>
    </body>
</html>

在IE8中运行此示例。单击链接（红色形状）可以防止浏览器使用/foo转到returnValue = false/return false。

但是，尝试取消<v:rect> 上的导航无效。浏览器导航到/bar！

有没有解决方案来解决这个问题？

Answer 1

这应该有效：

var b = document.getElementById('b');
b.attachEvent('onclick', function(e) {
    e.preventDefault();
});

使用href防止VML形状上的默认单击事件

1 个答案: