Avoid onRowClick event when outputLink is clicked inside of RichFaces datatable

Question

How to avoid the call to onRowClick on the datatable on the column that has the outputlink (target to a new window)?

<rich:dataTable id="dt" value="#{bean.cars} var="_car">
    <a:support event="onRowClick" action="#{action.navigateToCarDetails(_car.id)}"/>

    <rich:column>
        <f:facet name="header">Select</f:facet>
        <a:commandLink onclick="Event.stop(event)" action="#{bean.toggleSelectedCar(_car.id)}" reRender="dt" ajaxSingle="true" limitToList="true">                
            <h:graphicImage value="/img/icon_checkbox_#{bean.isCarSelected(_car.id) ? 'active' : 'inactive'}.gif"/>
        </a:commandLink>
    </rich:column>

    <rich:column>
        <f:facet name="header">Brand</f:facet>
        <h:outputLink value="#{_car.link}" target="_blank">
            <h:outputText value="#{_car.brand}"/>
        </h:outputLink>
    </rich:column>

    <rich:column>
        <f:facet name="header">Year</f:facet>
        <h:outputText value="#{_car.year}"/>
    </rich:column>

    <rich:column>
        <f:facet name="header">Color</f:facet>
        <h:outputText value="#{_car.color}"/>
    </rich:column>

</rich:dataTable>

So with the sample above, when I click on the row, it will navigate to a page with the detail of the Car.

And when clicked on the Select column's row, it will update the selected car, and update the checkbox icon accordingly, but without navigate to the car detail page, because I have the onclick="Event.stop(event)".

But when I click on the outputLink box, other than opening a new window and show the manufacturer web page, it also update the original page to the car details. How do I prevent this from happening? (I tried adding the onclick event stop just like the select column, but other than stopping the onrowclick event, it also block the link to the manufacturer web page)

Answer 1

Basically what Event.stop(event) does is the following:

\\ stops the event from bubbling up the event chain
event.stopPropagation();

\\ prevents the default action the browser makes on that event
event.preventDefault();

In your case you want just to prevent bubbling, so a way to go:

onclick="event.stopPropagation()"