2

I have a VML shape in which I'm trying to prevent the browser from navigating to the 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>

Run this sample in IE8. Clicking on the link (the red shape) properly prevents browser from going to /foo with returnValue = false/return false.

However, attempting to cancel the navigation on the <v:rect> does not work. The browser navigates to /bar!

Is there a solution to get around this?

4

1 回答 1

0

这应该有效：

var b = document.getElementById('b');
b.attachEvent('onclick', function(e) {
    e.preventDefault();
});
于 2013-04-09T22:11:38.770 回答