在 RichFaces 数据表中单击 outputLink 时避免 onRowClick 事件答案

【问题标题】：Avoid onRowClick event when outputLink is clicked inside of RichFaces datatable在 RichFaces 数据表中单击 outputLink 时避免 onRowClick 事件
【发布时间】：2015-08-19 09:42:27
【问题描述】：

如何避免在具有输出链接的列上的数据表上调用onRowClick（定位到新窗口）？

<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>

因此，对于上面的示例，当我单击该行时，它将导航到包含汽车详细信息的页面。

当点击“选择”列的行时，它将更新选定的汽车，并相应地更新复选框图标，但不会导航到汽车详细信息页面，因为我有 onclick="Event.stop(event)"。

但是当我点击输出链接框时，除了打开一个新窗口并显示制造商网页之外，它还会将原始页面更新为汽车详细信息。我该如何防止这种情况发生？（我尝试像选择列一样添加onclick事件停止，但除了停止onrowclick事件之外，它还阻止了指向制造商网页的链接）

【问题讨论】：

标签： javascript dom-events richfaces

【解决方案1】：

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()"

【讨论】：

这行得通！所以我这样做了` Brand `

【解决方案2】：

你应该可以做这样的事情：

<rich:dataTable
    onRowClick="if (event.target.id.endsWith('columnId')) return false;" …>

onRowClick 函数在a4j:support 之前执行，因此如果您返回 false，则不会调用该操作。

【讨论】：

dataTable 中的 onRowClick 实际上完全取代了 a4j:onRowClick，我用 a4j:onRowClick 检查生成的代码，我得到一个但是当 onRowClick 添加到dataTable 中，更改为那里指定的语句。所以导航到汽车详细信息页面即使在其他列上也不再起作用。