CODEWITHSUNDEEP
jointjs
Rajeev Kumar
Rajeev Kumar

Reputation: 1

How to differentiate between node click and hyperlink text click on element in jointjs

var el1 = new joint.shapes.custom.ElementLink({    
position: { x: 80, y: 80 },    
size: { width: 170, height: 100 },    
attrs: {    
rect: { fill: '#E67E22', stroke: '#D35400', 'stroke-width': 5 },    
a: { 'xlink:href': 'http://jointjs.com', 'xlink:show': 'new', cursor: 'pointer' },    
text: { text: 'Element as a link:\nhttp://jointjs.com', fill: 'white' }    

}

});

I want a handler for anchor tag where I can call any event from my viewmodel

Upvotes: 0

Views: 229

Answers (1)

dave
dave

Reputation: 4403

It depends what you want exactly. If you're using the joint.shapes.custom.ElementLink from this tutorial: http://jointjs.com/tutorial/hyperlinks, then this shape is defined so that it is totally wrapped in the <a> anchor tag and so clicking anywhere inside the element will follow the link. However, you can catch the click event and, for example, based on the target of the event or some other condition decide whether you want to follow the link or do other things:

paper.on('cell:pointerclick', function(cellView, evt, x, y) {
    // evt.target contains the SVG subelement that was the target of the click
    // cellView is the view for the joint.shapes.custom.ElementLink cell model
    // cellView.model is the cell model
    if (someCondition) {
        // This is how you can prevent the default browser action which is
        // following the <a> link.
        evt.preventDefault();
    }
})

Upvotes: 1

Related Questions