Search code examples
javascriptscrollbing-mapskeyup

Default arrows accessed by bing map scroll function


In my page I am using bing map and there is an issue and I cant solve that issues even tried for several times.

function getMap() {

    map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
        credentials: 'XXXX',
        showMapTypeSelector: false,
        enableSearchLogo: false
    });

    Microsoft.Maps.Events.addHandler(map, 'keydown', function (e) {
        if (e.keyCode === 40) {
            e.handled = true;
            return false;
        }
    });

    Microsoft.Maps.Events.addHandler(map, 'keyup', function (e) {
        if (e.keyCode === 38) {
            e.handled = true;
            return false;
        }
    });

    addPushpins();
}

In that page, I noticed my arrow keys have been hijacked by Bing map and is no longer scrolling the page. To avoid that bing map scrolling I added two functions for keyup and keydown.

After that when pressing keydown,the main page is scrolling and it is working fine.

But when I pressing the keyup arrow it only scrolls the bing map. Anyone can help me to solve this issue.


Solution

  • I found the answer, just replace the "keyup" into "keydown".

    function getMap() {
    
        map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
            credentials: 'XXXX',
            showDashboard: false
        });
    
        Microsoft.Maps.Events.addHandler(map, 'keydown', function (e) {
            if (e.keyCode === 40 || e.keyCode === 38) {
                e.handled = true;
            }
        });
    }