p:dataTable: Trigger rowSelect event when click embedded content (image) - css

Question

In the example below the rowSelect-event will be triggered if I click a row, but not if clicking the image in the row.
I understand why this happening, but i'm wondering if there is some elegant way to include the subcomponents also (possibly nested subcomponents also)?
<h:form id="form">
<p:growl id="growl" showDetail="true" />
<p:dataTable id="cars" var="car" value="#{tableBean.cars}" rows="5"
selectionMode="single">
<p:ajax event="rowSelect" listener="#{tableBean.onRowSelect}"
update=":form" />
<p:column headerText="Model">
<p:graphicImage value="myImage.png"
style="width: 40px; height: 40px;" />
</p:column>
</p:dataTable>
</h:form>

Answer 1

You can try to add an onclick event on the image:
<p:dataTable rowIndexVar="rowIndex" widgetVar="scrollist"...
... onclick="scrollist.unselectAllRows(); scrollist.selectRow(#{rowIndex})"

Answer 2

If the embedded content is an image that will be always displayed in a column (like in the picture below) and you want the image not interfering with the row selection, you can do:
<p:column styleClass="my_icon">
And create the css class:
.my_icon {
background-image: url("myicon.png");
background-repeat: no-repeat;
background-position: center;
}
You will get something like this:

Answer 3

just add the css to embeded img tag:
table tbody td img {
pointer-events: none;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}