Tree - how to cancel events in javascript
I want to make such a tree:
1. Tree has three level of nodes.
2. On each level node has one h:commandLink, which open page describing node in another browser window.
3. Nodes on level 1 and 2 can't be selected (no border outside, no events)
4. Nodes on level 3 can be selected (border + NodeSelectedEvent)
How to remove border (selection) in javascript on nodes from level 1 and 2?
How to cancel in javascript NodeSelectedEvent on the node from level 3, when user clicks on the link to details (in new window)?
### File *.jspx looks like: ###
<rich:tree id="tree" binding="#{DataSubgroup.tree}" value="#{DataSubgroup.model}" switchType="ajax" styleClass="CatGrSubTree" var="item"
changeExpandListener="#{DataSubgroup.processExpansion}"
nodeFace="#{item.class.name}"
reRender="tree,next">
<rich:treeNode type="bdr.model.Category">
<h:outputFormat value="#{msg['tables.subgroup.hierarchy.format.category']}">
<f:param value="#{item.name}"/>
</h:outputFormat>
<h:commandLink action="#{DictController.showCategoryInfo}" onclick="window.open('about:blank','INFO','width=400,height=300');" target="INFO" value="Info">
<f:param name="catId" value="#{item.id}"/>
</h:commandLink>
</rich:treeNode>
<rich:treeNode type="bdr.model.Group">
<h:outputFormat value="#{msg['tables.subgroup.hierarchy.format.group']}">
<f:param value="#{item.name}"/>
<f:param value="#{item.mpozn}"/>
<f:param value="#{item.timesString}"/>
</h:outputFormat>
<h:commandLink action="#{DictController.showGroupInfo}" onclick="window.open('about:blank','INFO','width=400,height=300');" target="INFO" value="Info">
<f:param name="grId" value="#{item.id}"/>
</h:commandLink>
</rich:treeNode>
<rich:treeNode type="bdr.model.Subgroup"
ajaxSubmitSelection="true"
nodeSelectListener="#{DataSubgroup.selectNode}">
<h:outputFormat value="#{msg['tables.subgroup.hierarchy.format.subgroup']}" onclick="submit();">
<f:param value="#{item.name}"/>
<f:param value="#{item.mpozn}"/>
<f:param value="#{item.timesString}"/>
<a4j:support event="click" actionListener="#{DataSubgroup.onSubgroupClick}"/>
</h:outputFormat>
<h:commandLink action="#{DictController.showSubgroupInfo}" onclick="window.open('about:blank','INFO','width=400,height=300');" target="INFO" value="Info">
<f:param name="subId" value="#{item.id}"/>
</h:commandLink>
</rich:treeNode>
</rich:tree>
<h:commandButton id="next" value="Next >>" disabled="#{DataSubgroup.subgroup==null}">
</h:commandButton>
When I click on the "Info" link on the levels 1 and 2, it works good and new window is opened. But when I click on the node (not "Info" link) border outside node is displayed.
When I click on the "Info" link on the node on level 3, it doesn't work, because it sends NodeSelectedEvent to the server. When I click on the node NodeSelectedEvent is raised and it works good.
How can I improve this with removing in javascript unwanted border from level 1,2 and cancel NodeSelectedEvent when user clicks on the "Info" link on the level 3?
Please help me.