雅虎用户界面自定义按钮答案

【问题标题】：Yahoo UI Custom Button雅虎用户界面自定义按钮
【发布时间】：2009-12-27 04:40:12
【问题描述】：

我有一个通过 HTML 标记定义的 YUI 按钮。我设法让它正确加载和“剥皮”。

问题是自定义点击事件。我尝试了许多方法，所有这些方法都将自定义函数链接到“点击”事件，但无论我采用哪种方式，它总是在页面加载时触发，然后在点击时不会触发。我似乎无法让它“等待”用户点击。在他第一次约会时，它就像处女一样开枪。

下面的代码......

<script type="text/javascript">
    YAHOO.util.Event.onContentReady("submitbutton", onButtonReadySubmit);
    YAHOO.util.Event.onContentReady("editbutton",onButtonReadyEdit);

    var myTabs = new YAHOO.widget.TabView("demo");
    function editDoc(sBaseRef, sUNID) {
        var sNewURL = sBaseRef + "/0/" + sUNID + "?EditDocument";
        alert("Going to : " + sNewURL);
     window.location.href=sNewURL;
    }
    function onButtonReadySubmit() {
 var oSubmitButton = new YAHOO.widget.Button("submitbutton");
    }
    function onButtonReadyEdit() {
        var oEditButton = new YAHOO.widget.Button("editbutton");
        YAHOO.util.Event.addListener("editbutton", 'click', editDoc('a URL path goes here' , 'A PageKey goes here'));
    }

【问题讨论】：

标签： button yui click custom-event

【解决方案1】：

YUI Button 在 YUI Button 实例上发布自己订阅的点击事件，而不是使用 YAHOO.util.Event.addListener。这在 YUI Button 登陆页面上有详细描述：http://developer.yahoo.com/yui/button/#handlingevents。

【讨论】：

【解决方案2】：

你的问题是第三个论点。那应该是对功能的引用。在您的代码中发生的情况是 3 参数是一个在创建侦听器时调用的函数，并且不返回任何内容。

你有：

YAHOO.util.Event.addListener("editbutton", 'click', editDoc(
    'a URL path goes here', 
    'A PageKey goes here'
));

你想要的只是：

YAHOO.util.Event.addListener("editbutton", 'click', editDoc);

但是，您还想在点击时将'URL 路径放在此处' 和'PageKey 放在此处' 传递给函数。为此，请使用可选的第四个参数 addListener() - 传递给函数的对象。

function editDoc (ev, oArgs) {
   var sBaseRef = oArgs.url,
       sUNID    = oArgs.key;

   /* code here */

}

YAHOO.util.Event.addListener("editbutton", 'click', editDoc, { 
    url: 'a URL path goes here',
    key: 'A PageKey goes here'
});

请参阅http://developer.yahoo.com/yui/docs/YAHOO.util.Event.html#method_addListener 了解更多信息。

正如 Todd 所提到的，您也可以在创建 YUI 按钮的过程中执行此操作 - 但同样存在函数与函数引用的问题。

【讨论】：