Stop click event propagation

Question

I'm using HTML nodes which has buttons in them and am unable to prevent the selection of node when clicking on the button within the node. I tried using event.stopPropagation() but it is not working.

Aravind Ravi · Accepted Answer

Hi Jasmine,

By using the Node constraints we can able to prevent node from selecting. By default, in the diagram, if the button inside node is clicked means then node gets selected automatically. To restrict the node selection, set node constraints as ReadOnly. So that when we click on the button, node does not gets selected. Please refer to the below code snippet

public nodes: NodeModel[] = [{

id: 'node1', height: 100, width: 100, offsetX: 200, offsetY: 200,

constraints: NodeConstraints.ReadOnly,

shape: {

type: 'HTML',

content: '<div style="width:100%">'+

'<input type="button" id="button" value="Submit">'+

'</div>'}

}];

Regards

Aravind Ravi

'+ ''+ '

'} }]; Regards Aravind Ravi

Jasmine Tay · Answer

Hi!I would like to be able to select the node as well. For eg clicking elsewhere within the node other than the button. Is that possible?

Aravind Ravi · Answer

Hi Jasmine,

We have created a sample to restrict node selection while click the button. By default, in the diagram, after diagram created, created event gets triggered. In the created event get the button element and trigger a click event for the button. So once we click the button, the button click event gets triggered. In that button click event, unselect the selected node in the diagram through unselect public API method. When we click on the button, in the diagram selectedItems nodes collection that node gets pushed. In the unselect method pass that selected node, so that while click on the button, that node gets unselected. Please refer to the below code snippet and sample

public created() {

let button = document.getElementById('button');

button.onclick = () => {

this.diagram.unSelect(this.diagram.selectedItems.nodes[0]);

}