javascript - JQuery UI 小部件 - 如何使用包装器元素引发事件

Question

我一直在开发一个扩展 ui.mouse 的 jquery 小部件。

小部件需要通过创建元素并将它们附加到 this.element 来响应鼠标事件。

如果小部件应用于不能包含子元素的 HTML 元素(例如 IMG 标签)，则小部件会创建一个代理包装器元素并包装 this.element。

如果我用 wrapper 元素替换 this.element，widget 触发的事件永远不会被处理，因为对 widget 实例的 .bind() 调用将处理程序应用到原始元素，而不是 wrapper。

如果我不将 this.element 替换为包装器元素，则 ui.mouse 定义的 _mouse* 事件将无法正确调用，因为它们应用于 this.element 而不是包装器。

是否有一种优雅的方式以某种方式返回包装器元素，以便将后续的 bind() 调用应用于它，或者使 ui.mouse 原型(prototype)应用于 this.element 以外的元素？

非常欢迎任何其他优雅的解决方案或建议。

这是我尝试过的两种情况。

不替换 this.element

$.widget("ui.example", ui.mouse, {

    _containerElement: null,

    _create: function ()
    {
        if (this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i))
        {
            this._applyContainer();
        }else{
            this._containerElement = this.element;
        }

        // Applies mouse interaction handlers to this.element
        this._mouseInit();

    },

    _applyContainer: function () 
    {
        this.element.wrap("<span>");
        this._containerElement = this.element.parent();
        this._containerElement.css({position:'relative'});
    },


    _mouseStart: function (event) {

        // Not always called because it handles mouse interaction with
        // the IMG element rather than the wrapper element

        this._trigger("mouseevent");
    }
})

$("IMG").example().bind("examplemouseevent", function(){
    //This fires but only when the original IMG element is clicked, not the wrapper
})

替换 this.element

$.widget("ui.example", ui.mouse, {

    _create: function ()
    {
        if (this.element[0].nodeName.match(/canvas|textarea|input|select|button|img/i))
        {
            this._applyContainer();
        }

        // Applies mouse interaction handlers to this.element
        this._mouseInit();

    },

    _applyContainer: function () 
    {
        this.element.wrap("<span>");
        this.element = this.element.parent();
        this.element.css({position:'relative'});
    },

    _mouseStart: function (event) {

        // This event is never handled because it is not raised on the original element. 
        this._trigger("mouseevent");
    }
})

$("IMG").example().bind("examplemouseevent", function(){
    //This never fires because the bind is to the IMG element, not the wrapper
})

我很确定我遇到的问题是由于我理解 jquery ui.mouse 工作方式的缺点，或者是 jquery 小部件框架的限制。

用包装原始 this.element 的元素替换 this.element 是可行的，但事件不会传递给稍后绑定(bind)到小部件的处理程序。

不替换 this.element 并存储对包装器的单独引用会导致 jquery 基础 ui.mouse 的行为将事件附加到错误的元素。

代码按设计运行，我的问题是找到最佳方法来处理设计限制。

我可以看到很多解决这个问题的方法。例如; duck-punching _trigger 方法以在正确的元素上触发事件，或者在 ui.mouse 附加所需的处理程序时来回交换 this.element 值。这些以及我考虑过的任何其他方法看起来都非常困惑。

我看过原生的 jquery.resizable 小部件代码，它也创建了一个包装器，但据我所知，如果它试图触发事件，它也会遇到同样的问题。

这是我第一次使用 JQuery 小部件，所以我想向 JQuery 专家确认我没有遗漏任何东西？

Answer 1

我会尝试这样的方法:

_applyContainer: function () 
{
    this.element.wrap("<span>");
    this.element.bind("list of events", function(){
        this.element.parent().trigger("name of event");
    });
    this.element = this.element.parent();
    this.element.css({position:'relative'});
}

构建包装器元素时，绑定(bind)子元素，无论事件列表如何(如果这个概念不起作用，您可以迭代)并触发父(作用域，已知)元素同名事件。注意:“事件列表”应该类似于“mouseover mouseout click”等，然后“事件名称”应该替换为一些逻辑以检测哪些列表被触发。