CODEWITHSUNDEEP
javascripthtmlsvgondblclick
Artier
Artier

Reputation: 1673

unable to call ondblclick event on svg <g> tag

I have code where I am able to get click events. I'm unable to get double click events on <g> tag though.

<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            background:black;
        }
        svg{
            fill:white;
            background:white;
            position: absolute;
            top:0px;
            left:0px;
        }
        
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        x=""
        i=0;

        function clicked(evt){
            var append="width* "+(evt.clientX/1188).toFixed(4)+"f , height*"+(evt.clientY/2038).toFixed(4)+"f";

            if(i%2===0){
                x+="path.quadTo("+append+","
            }
            else{

                x+=append+")\n"
            }
            i++;

        }
function doubleclicked(evt){
alert("doiuble:")
            var append="width* "+(evt.clientX/1188).toFixed(4)+"f , height*"+(evt.clientY/2038).toFixed(4)+"f";

     x+="path.move("+append+","
            
        }

        $(document).ready(function(){
            $(document).click(function (ev) {
                mouseX = ev.pageX;
                mouseY = ev.pageY
                console.log(mouseX + ' ' + mouseY);
                var color = 'white';
                var size = '22px';
                $("body").append(
                    $('<div></div>')
                        .css('position', 'absolute')
                        .css('top', mouseY + 'px')
                        .css('left', mouseX + 'px')
                        .css('width', size)
                        .css('height', size)
                        .css('background-color', color)
                );
            });
        });

    </script>
</head>
<body>
    <div>
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1198" height="2048">
            <g ondblclick="doubleclicked(evt)"  onclick="clicked(evt)" >
                <path xmlns="http://www.w3.org/2000/svg" fill="currentColor" d="M275 462q140 -29 316 -14q49 4 54 35q0 20 -39 92l-14 24q-14 21 -167 177q-88 89 -104 109q-91 113 -136 307l-8 34v57q0 57 4 82q24 179 153 237q94 47 233 34q141 -15 259 -104q173 -130 270 -371q15 -36 29 -39q13 0 2 47q-82 319 -289 535q-138 138 -292 169 q-192 37 -323 -50q-214 -176 -130 -555q51 -224 197 -429q50 -71 160 -193q58 -64 58 -67q0 -4 -9 -8q-182 -19 -310 29q-20 10 -49 50q-15 21 -21 27q-6 7 -14 4q-13 -10 -5 -33q4 -18 19 -42q75 -123 156 -144z"/>
            </g>
        </svg>      
    </div>
</body>
</html>

Upvotes: 0

Views: 68

Answers (0)

Related Questions