1

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

例如，我想创建：

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

“轮子”是我的自定义事件。一旦“轮子”被绑定，它应该绑定真实事件：

$(???).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)任何车轮事件；它应该只在选定的元素上侦听，并且仅在绑定事件时才侦听。

4

1 回答 1

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/（马克的小提琴与他的插件的改进版本）

于 2013-09-27T16:22:11.773 回答