jQuery自定义事件插件

我知道我可以使用

$（'#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);
});

有办法做到这一点吗

---

注意：我不想在

$（文档）

上收听任何车轮事件；它应该只在所选元素上进行监听，并且只在绑定事件时进行监听。

下面是一个简短的插件，它可以实现您想要的功能（感谢Barmar的创意）：

这很容易解释，但它基本上只是将

mouseweel-DOMMouseScroll

绑定到调用它的每个元素。它还将事件对象作为回调参数传递

---

它在这里工作：（马克摆弄他的改进版插件）

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

这很容易解释，但它基本上只是将

mouseweel-DOMMouseScroll

绑定到调用它的每个元素。它还将事件对象作为回调参数传递

---

它在这里起作用了：（Mark在摆弄改进版的插件）

我认为您无法自定义jQuery如何解释

事件

参数。您应该编写一个插件，允许您编写

$（“#mydiv”）.wheel（）

，并将其绑定到自定义

wheel

事件和标准

mouseweel

和

DOMMouseScroll

事件中。@Joe:我在最新的一段中明确提到了这一点。此外，我不需要在所有元素上触发它；我可以得到目标元素，但它仍在监听所有内容，并且在不应该阻止冒泡的情况下，它可能会被阻止。我认为您无法自定义jQuery如何解释

事件

参数。您应该编写一个插件，允许您编写

$（“#mydiv”）.wheel（）

，并将其绑定到自定义

wheel

事件和标准

mouseweel

和

DOMMouseScroll

事件中。@Joe:我在最新的一段中明确提到了这一点。此外，我不需要在所有元素上触发它；我可以获得目标元素，但它仍在监听所有内容，并且在不应该阻止冒泡的情况下，它可能会被阻止。我对您的解决方案进行了一些改进：浏览器支持现在应该更好一些。谢谢你的回答！如果我们不能按我所希望的方式进行自定义活动，我认为这是一个好办法。我已经对您的解决方案进行了一些改进：浏览器支持现在应该更好一些。谢谢你的回答！如果我们不能以我想要的方式进行定制活动，我认为这是一种方式。

$.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);
});