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

【问题标题】：Prevent default click event on VML shape with href使用 href 防止 VML 形状上的默认单击事件
【发布时间】：2013-04-10 06:11:38
【问题描述】：

我有一个 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 中运行此示例。单击链接（红色形状）可以正确防止浏览器使用returnValue = false/return false 转到/foo。

但是，尝试取消<v:rect> 上的导航不起作用。浏览器导航到/bar!

有解决办法吗？

【问题讨论】：

你也可以试试cancelBubble（来自brainjar.com/dhtml/events/default3.asp的internet explorer equivalents部分）
@roberkules - 哎呀忘了说cancelBubble=true 也不起作用。
@TheCloudlessSky：尝试通过window.event 修改事件，而不是从事件处理程序的参数中设置returnValue。
@Jay - 我之前也尝试过，我只是又做了一次，但这也没有用（将 window.event.returnValue = false; window.event.cancelBubble = true; 添加到 b 点击处理程序）。

标签： javascript html internet-explorer internet-explorer-8 vml

【解决方案1】：

这应该可行：

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

【讨论】：