在RichFaces数据表中单击outputLink时,请避免使用onRowClick事件

时间:2015-06-04 16:43:44

标签: javascript javascript-events datatable richfaces

如何避免在具有outputlink的列上的数据表上调用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>

因此,通过上面的示例,当我点击该行时,它将导航到包含Car详细信息的页面。

当点击选择列的行时,它将更新所选汽车,并相应地更新复选框图标,但不导航到汽车详情页面,因为我有 onclick =“Event.stop(事件) )“即可。

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

2 个答案:

答案 0 :(得分: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()"

答案 1 :(得分:0)

你应该可以这样做:

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

onRowClick函数在a4j:support之前执行,所以如果你返回false,那么动作就不会被调用。