无法在SVG的<g>标签上触发ondblclick事件求助

你的代码里标签的click事件能正常触发，但dblclick事件失效，核心原因是绑定在document上的click事件通过事件冒泡干扰了双击事件的识别。双击时，会先触发两次的click事件并冒泡到document的click事件，打乱了浏览器对双击行为的判断逻辑。

修复方案1：阻止的click事件冒泡 #

修改clicked函数，添加evt.stopPropagation()阻止事件向上冒泡，避免触发document层级的click事件：

function clicked(evt){
    evt.stopPropagation(); // 新增该行，切断事件冒泡路径
    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++;
}

修复方案2：在document的click事件中过滤区域的点击 #

如果需要保留document的click事件功能，可以在事件处理中判断点击目标是否属于内部，若是则跳过处理：

$(document).ready(function(){
    $(document).click(function (ev) {
        // 若点击目标在<g>或其子元素内，直接返回不执行后续逻辑
        if($(ev.target).closest('g').length > 0){
            return;
        }
        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)
        );
    });
});

另外注意代码中的一处小错误：原代码里的$('<div></div>')是错误的转义写法，应该改为$('<div></div>')，否则无法正确创建div元素。

验证效果 #

修改完成后，双击标签内部的图形区域，就能正常触发doubleclicked函数的alert提示了。

内容的提问来源于stack exchange，提问作者Artier