在 RichFaces 数据表中单击 outputLink 时避免 onRowClick 事件
Avoid onRowClick event when outputLink is clicked inside of RichFaces datatable
如何避免在具有输出 link 的列的数据表上调用 onRowClick
(目标为新的 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>
所以对于上面的示例,当我单击该行时,它将导航到包含汽车详细信息的页面。
当点击 Select 列的行时,它会更新 selected 汽车,并相应地更新复选框图标,但不会导航到汽车详细信息页面,因为我有onclick="Event.stop(event)"
.
但是当我点击输出链接框时,除了打开一个新的 window 并显示制造商网页外,它还会将原始页面更新为汽车详细信息。我如何防止这种情况发生? (我尝试像 select 列一样添加 onclick
事件停止,但除了停止 onrowclick
事件外,它还会阻止 link 到制造商网页)
您应该可以这样做:
<rich:dataTable
onRowClick="if (event.target.id.endsWith('columnId')) return false;" …>
onRowClick 函数在 a4j:support
之前执行,因此如果您 return false 将不会调用该操作。
基本上 Event.stop(event)
的作用如下:
\ stops the event from bubbling up the event chain
event.stopPropagation();
\ prevents the default action the browser makes on that event
event.preventDefault();
在你的情况下,你只想防止冒泡,所以要走的路:
onclick="event.stopPropagation()"
如何避免在具有输出 link 的列的数据表上调用 onRowClick
(目标为新的 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>
所以对于上面的示例,当我单击该行时,它将导航到包含汽车详细信息的页面。
当点击 Select 列的行时,它会更新 selected 汽车,并相应地更新复选框图标,但不会导航到汽车详细信息页面,因为我有onclick="Event.stop(event)"
.
但是当我点击输出链接框时,除了打开一个新的 window 并显示制造商网页外,它还会将原始页面更新为汽车详细信息。我如何防止这种情况发生? (我尝试像 select 列一样添加 onclick
事件停止,但除了停止 onrowclick
事件外,它还会阻止 link 到制造商网页)
您应该可以这样做:
<rich:dataTable
onRowClick="if (event.target.id.endsWith('columnId')) return false;" …>
onRowClick 函数在 a4j:support
之前执行,因此如果您 return false 将不会调用该操作。
基本上 Event.stop(event)
的作用如下:
\ stops the event from bubbling up the event chain
event.stopPropagation();
\ prevents the default action the browser makes on that event
event.preventDefault();
在你的情况下,你只想防止冒泡,所以要走的路:
onclick="event.stopPropagation()"