Search code examples
javascriptshiftdouble-clickkonvajs

Can Konva.js recognize SHIFT+dblclick?


Would it be a correct understanding that Konva's stage doesn't recognizes SHIFT+dblclick?

In my following code below, (1) isn't realized---Yes, I would like to realize (1). When double-clicking, (2) and (4) show up correctly (as expected), while when holding the shift key and double-clicking, (2) (not (1)!) and (3) show up.

My code:

<!DOCTYPE html>
<html>
    <body>
        <div id="container"></div>
    </body>
    <script src="https://unpkg.com/[email protected]/konva.min.js"></script>
    <script>//Double click on Konva's stage.
        var stage = new Konva.Stage({
            container: 'container',
            width: window.innerWidth,
            height: window.innerHeight
        });
        stage.on('dblclick', function (e) {
        var key_shift1 = e.shiftKey;
            if (key_shift1){
                console.log('(1)[Konva]SHIFT+dblclick-->No! I want this.');
            }else {
                console.log('(2)[Konva]dblclick-->Yes!');
            }
        });
    </script>
    <script>//Double click ordinally
        document.querySelector('body').addEventListener('dblclick', function (e) {
            var key_shift2 = e.shiftKey;
            if (key_shift2){
                console.log('(3)SHIFT+dblclick-->Yes!');
            }else {
                console.log('(4)dblclick-->Yes!');
            }
        });
    </script>
</html>

Solution

  • e argument that you are using inside dblclick event is not a native event object. It is a custom object, created by Konva. If you need to get access to to native event you can use e.evt:

    stage.on('dblclick', function (e) {
      var shift = e.evt.shiftKey;
    });