Question

我已经有一段时间了，因为我已经完成了一个jQuery插件，而且我正在使用选项和内部事件来处理一个非常常见的样板。在其中一个内部方法中，我需要触发自定义事件，以便其他页面可以捕获事件并使用它。更具体地说，在这个用法中，在绘制canvas元素的最后，我希望能够捕获插件之外的事件，以便获取canvas内容，以便在其他地方发送不可知的插件本身。

但是，trigger调用无法触发或从其他页面查找绑定事件。 Firebug中没有出现任何控制台消息。

这是我的示例插件（简化）：

; (function ($, window, document, undefined) {
    "use strict";

    var $canvas,
        context,
        defaults = {
            capStyle: "round",
            lineJoin: "round",
            lineWidth: 5,
            strokeStyle: "black"
        },
        imgElement,
        options,
        pluginName = "myPlugin";

    function MyPlugin(element, opts) {
        this.imgElement = element;
        this.options = $.extend({}, defaults, opts);
        this._defaults = defaults;
        this._name = pluginName;
        this.init();
    }

    $.extend(MyPlugin.prototype, {
        init: function () {
            var $imgElement = $(this.imgElement);
            $canvas = $(document.createElement("canvas")).addClass("myPluginInstances");

            $imgElement.after($canvas);

            context = $canvas[0].getContext("2d");

            $canvas.on("mousedown touchstart", inputStart);
            $canvas.on("mousemove touchmove", inputMove);
            $canvas.on("mouseup touchend", inputEnd);
        }
    });

    $.fn.myPlugin = function (opts) {
        return this.each(function () {
            if (!$.data(this, "plugin_" + pluginName)) {
                $.data(this, "plugin_" + pluginName, new MyPlugin(this, opts));
            }
        });
    };

    function inputStart(event) {
        //...processing code
    }

    function inputMove(event) {
         //...processing code
    }

    function inputEnd(event) {
        //...processing code

        // Trigger custom event
        $(this.imgElement).trigger("mydrawevent", [this.toDataURL()]);
    }
}(jQuery, window, document));

然后从document.ready的单独页面中绑定事件：

$(".myPluginInstances").myPlugin().on("mydrawevent", function (e, data) {
    console.log("mydrawevent");
    console.log(data);
});

从Firebug我看到imgElement确实有侦听器绑定：

mydrawevent
    -> function(a)
        -> function(e, data)

我尝试过很多东西，例如在不同的DOM元素上调用trigger，将事件参数数据传入和传出数组，定义一个回调方法（它有自己的问题）），和更多。我觉得这个问题在我面前是愚蠢的，但是我可以用更多的眼睛来检查我的理智。

Answer 1

作为对上面对Vikk的回应的进一步解释，问题确实是确定和理解哪些对象绑定到插件的哪些部分。在我的例子中，作为私有事件处理程序的内部方法绑定到我的canvas元素，但插件本身正在img元素上实例化，这至少是此特定实现的临时要求。

基于此，从内部事件处理程序使用$(this)意味着它试图在我的trigger元素上使用canvas而不是img元素从插件外部附加了mydrawevent侦听器。

jQuery插件自定义事件触发器未触发

1 个答案: