css - p:dataTable: 点击嵌入内容时触发 rowSelect 事件（图片）

Question

在下面的示例中，如果我单击一行将触发 rowSelect-event，但如果单击该行中的图像则不会。

我理解为什么会发生这种情况，但我想知道是否有一些优雅的方式来包含子组件（也可能是嵌套的子组件）？

<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

您可以尝试在图像上添加 onclick 事件：

<p:dataTable rowIndexVar="rowIndex" widgetVar="scrollist"...

... onclick="scrollist.unselectAllRows(); scrollist.selectRow(#{rowIndex})"

Answer 2

如果嵌入的内容是始终显示在列中的图像（如下图所示）并且您希望图像不干扰行选择，您可以执行以下操作：

<p:column styleClass="my_icon">

并创建 css 类：

.my_icon {
   background-image: url("myicon.png");
   background-repeat: no-repeat;
   background-position: center;
}

你会得到这样的东西：

Answer 3

只需将 css 添加到嵌入的 img 标签：

表 tbody td img { 指针事件：无；

  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
  user-select: none;

}