Question

我知道我可以使用$('#x').trigger('y')来解决任何我喜欢的事件，但是我希望创建一个可以绑定到任何DOM元素的新事件类型，除非被监听，否则不会被触发。

例如，我想创建：

$('#mydiv').on('wheel', function(e) {
   // do something with e
});

“wheel”是我的自定义事件。一旦绑定了“wheel”，它就应该绑定真实事件：

$(???).on('mousewheel DOMMouseScroll', function(e) {
    e.delta = null;
    if (e.originalEvent) {
        if (e.originalEvent.wheelDelta) e.delta = e.originalEvent.wheelDelta / -40;
        if (e.originalEvent.deltaY) e.delta = e.originalEvent.deltaY;
        if (e.originalEvent.detail) e.delta = e.originalEvent.detail;
    }
    $(this).trigger('wheel', e);
});

有办法做到这一点吗？

注意：我不想在$(document)上听任何车轮事件;它应该只听取所选择的元素，并且只有当事件被绑定时才会收听。

Answer 1

这是一个简短的插件，可以实现您想要的功能（感谢Barmar的想法）：

$.fn.wheel = function (callback) {
    return this.each(function () {
        $(this).on('mousewheel DOMMouseScroll', function (e) {
            e.delta = null;
            if (e.originalEvent) {
                if (e.originalEvent.wheelDelta) e.delta = e.originalEvent.wheelDelta / -40;
                if (e.originalEvent.deltaY) e.delta = e.originalEvent.deltaY;
                if (e.originalEvent.detail) e.delta = e.originalEvent.detail;
            }

            if (typeof callback == 'function') {
                callback.call(this, e);
            }
        });
    });
};

$('body').wheel(function (e) {
    console.log(e);
});

它非常自我解释，但它基本上只是将mousewheel DOMMouseScroll绑定到它所调用的每个元素上。它还将事件对象作为回调参数传递。

在这里工作：http://jsfiddle.net/uTbGp/2/（马克的小提琴改进版插件）

jQuery自定义事件插件

1 个答案: