Question

    <h:commandLink id="#{id}" value="#{value}" action="#{actionBean.getAction}" onclick="alert(this);"/>

在前面的简化示例中，Javascript函数中使用的'this'关键字不会引用生成的A HREF元素，但会引用全局窗口，因为JSF生成以下（简化）代码：

<a onclick="var a=function(){alert(this)};var b=function(){if(typeof jsfcljs == 'function'){jsfcljs(document.forms['mainForm'],'generatedId,action,action','');}return false};return (a()==false) ? false : b();" href="#" id="generatedId">text</a>

因为JSF将用户定义的onclick包装在一个函数中，这将指向全局窗口。我无法访问元素的id，因为我的代码用于可以在循环等中使用的泛型组件中，并且我不使用支持bean（Facelets + JSF）。

所以我的问题是，有没有办法从我的onclick javascript函数中访问A HREF元素，而不知道id？

Answer 1

var a = function（）{alert（this）}; var b = function（）{if（typeof jsfcljs =='function'）{jsfcljs（document.forms ['mainForm']，'generatedId，action， action'，''）;} return false}; return（a（）== false）？ false：b（）;

亲爱的主啊！那是非常可怕的。

不，在您有机会看到它之前似乎丢掉了'这个' - 应该说“返回（a.call（this）== false）？ false：b（）“。

在IE上，你只能从window.event读取srcElement，但那很难看。

如何通过使用不显眼的脚本来完全避免JSF的奇怪事件损坏？例如。省略onclick并说：

document.getElementById('generatedId').onclick= function() {
    alert(this);
    return false; // if you want to not follow the link
}

如果您需要链接继续进入JSF的事件处理，您必须保存旧的onclick事件处理程序并在函数末尾调用它，或者使用Element.addEventListener（IE上的attachEvent）来编写脚本在onclick的早期阶段挂钩。

Answer 2

编辑：

到这里获取一个小型库/示例代码，用于从 id 获取 clientId ：JSF: working with component IDs

JSF控件发出的HTML ID是命名空间以避免冲突（例如，控件是UIData的子节点并多次发出，或者容器是portlet，因此可以在一个HTML中多次呈现视图页）。此ID称为clientId，与JSF控件上的ID集不同。

如果要在视图中发出clientId，可以使用托管bean来执行此操作。

public class JavaScriptBean {

    public String getOnclickButton1() {
        String id = "button1";
        String clientId = getClientId(id);
        return "alert('You clicked element id=" + clientId + "');";
    }

    public String getOnclickButton2() {
        String id = "button2";
        String clientId = getClientId(id);
        return clientId;
    }

    private String getClientId(String id) {
        FacesContext context = FacesContext.getCurrentInstance();
        UIViewRoot view = context.getViewRoot();
        UIComponent component = find(view, id);
        return component.getClientId(context);
    }

    private UIComponent find(UIComponent component, String id) {
        if (id.equals(component.getId())) {
            return component;
        }

        Iterator<UIComponent> kids = component.getFacetsAndChildren();
        while (kids.hasNext()) {
            UIComponent kid = kids.next();
            UIComponent found = find(kid, id);
            if (found == null) {
                continue;
            }
            return found;
        }

        return null;
    }

}

这是在应用程序的faces-config.xml中配置的，并使用表达式语言绑定到视图：

<f:view>
    <h:form>
        <h:commandButton id="button1" value="b1"
            onclick="#{javaScriptBean.onclickButton1}" />
        <h:commandButton id="button2" value="b2"
            onclick="alert('You clicked element id=#{javaScriptBean.onclickButton2}');" />
    </h:form>
</f:view>

Answer 3

<head>
..
<script type="text/javascript">
var myCommandLinkId = "undefined";
</script>
..
</head>

..

<h:commandLink id="myCommandLink" value="Click Me" onmousedown="myCommandLinkId=this.id;" onclick="alert(myCommandLinkId);" />

如何从JSF组件中的javascript调用引用'this'？

3 个答案: