How to make person names clickable in custom template to trigger custom action?

[frankbracq]

Hello,

I'm using FamilyTree2 and I need to make person names clickable to trigger a custom action (opening a details panel), while preserving the default node click behavior (focus/recenter).

Current setup: I have a custom template with the person's name in template.svg:
template.svg = function(node) {
const personId = node.familyMember?.id || node.id;
const name = node.familyMember?.name || '';

return <rect ...></rect> <text x="10" y="35" class="person-link" data-person-id="${personId}" data-show-details="true" style="cursor: pointer;"> ${name} </text> <!-- birth/death info -->;
};

What I need:
Click on the person's name (the element) → trigger my custom action
Click on the node frame (the ) → keep FamilyTree2's default behavior (focus button)

What I tried:
Adding event listener with event delegation on the container, but clicks on SVG elements don't seem to be properly captured
Using onNodeClick callback, but it intercepts all clicks on the entire node

Question: What's the recommended way to make specific elements inside template.svg clickable while preserving FamilyTree2's default node click behavior for other parts of the node? Thank you!

[plamen-peshev]

I have ctreated Code demo for you: https://code.balkan.app/family-tree-js-2/make-svg-sub-elements-clickable#JS

To cancel the default click event you can attach to the nodeClick and return false

familyTree.onNodeClick(function(args){
    var target = args.event.target;
    if (target.hasAttribute('data-field')){
        alert(`You clicked ${target.getAttribute('data-field')} field. do somthing.`)
        return false; //cancel the deafault click event
    }
    return true; 
});

[frankbracq]

Thank you very much for your quick reply: works fine!