确定用户是点击滚动条还是内容（原生滚动条的onclick事件）

我正在尝试使用jQuery创建自定义事件，以便检测当滚动条被单击¹时的情况。
虽然有很多文本，但是所有我的问题都是加粗的，而且还有一个JSFiddle示例可以直接操作。

因为我没有找到任何内置的功能来实现这一点，
所以我创建了一个hasScroll函数，用于检查元素是否有滚动条。

$.fn.hasScroll = function(axis){
    var overflow = this.css("overflow"),
        overflowAxis;

    if(typeof axis == "undefined" || axis == "y") overflowAxis = this.css("overflow-y");
    else overflowAxis = this.css("overflow-x");

    var bShouldScroll = this.get(0).scrollHeight > this.innerHeight();

    var bAllowedScroll = (overflow == "auto" || overflow == "visible") ||
                         (overflowAxis == "auto" || overflowAxis == "visible");

    var bOverrideScroll = overflow == "scroll" || overflowAxis == "scroll";

    return (bShouldScroll && bAllowedScroll) || bOverrideScroll;
};

还需要一个inScrollRange函数，用于检查所执行的点击是否在滚动范围内。

var scrollSize = 18;

function inScrollRange(event){
    var x = event.pageX,
        y = event.pageY,
        e = $(event.target),
        hasY = e.hasScroll(),
        hasX = e.hasScroll("x"),
        rX = null,
        rY = null,
        bInX = false,
        bInY = false

    if(hasY){
        rY = new RECT();
        rY.top = e.offset().top;
        rY.right = e.offset().left + e.width();
        rY.bottom = rY.top +e.height();
        rY.left = rY.right - scrollSize;

        //if(hasX) rY.bottom -= scrollSize;
        bInY = inRect(rY, x, y);
    }

    if(hasX){
        rX = new RECT();
        rX.bottom = e.offset().top + e.height();
        rX.left = e.offset().left;
        rX.top = rX.bottom - scrollSize;
        rX.right = rX.left + e.width();

        //if(hasY) rX.right -= scrollSize;
        bInX = inRect(rX, x, y);
    }

    return bInX || bInY;
}

滚动条大小是否都一致？例如在Firefox和IE中都是18像素。
假设没有自定义滚动条，那么某些浏览器中是否有额外的填充或大小？

这些函数看起来都按预期执行（据我所见）。

制作自定义事件有点棘手，但我成功地让它工作了一些。唯一的问题是，如果被点击的元素附加了mousedown/up事件，那么这些事件也会被触发。

我似乎无法阻止其他事件触发同时触发我所谓的mousedownScroll/mouseupScroll事件。

$.fn.mousedownScroll = function(fn, data){
    if(typeof fn == "undefined" && typeof data == "undefined"){
        $(this).trigger("mousedownScroll");
        return;
    }

    $(this).on("mousedownScroll", data, fn);
};

$.fn.mouseupScroll = function(fn, data){
    if(typeof fn == "undefined" && typeof data == "undefined"){
        $(this).trigger("mouseupScroll");
        return;
    }

    $(this).on("mouseupScroll", data, fn);
};

$(document).on("mousedown", function(e){
    if(inScrollRange(e)){
        $(e.target).trigger("mousedownScroll");
    }
});

$(document).on("mouseup", function(e){
    if(inScrollRange(e)){
        $(e.target).trigger("mouseupScroll");
    }
});

$("selector").mousedown(function(e){
    console.log("Clicked content."); //Fired when clicking scroller as well
});

$("selector").mousedownScroll(function(e){
    console.log("Clicked scroller.");
});

如何停止触发其他的“单击”事件？

在此期间，请随意尽可能地优化代码。

这里有一个JSFiddle供您玩耍。

我正在制作这个项目，是因为我正在开发一个更大的插件。它有一个自定义上下文菜单，显示在我右键单击其中一个滚动条时。我不想要那个。所以我想做一个事件来检查滚动点击(mousedown/up)，然后防止上下文菜单被显示出来。但是，为了做到这一点，我需要让滚动点击先于正常点击，并且在可能的情况下，停止正常点击的触发。

我只是在这里公开思考，但也许有一种方法可以获取绑定到元素的所有函数，然后切换它们添加的顺序？我知道函数按它们添加的顺序执行（先添加的先调用），因此，如果我能介入该过程，或许整个将事件注册到JQuery的过程就可以插入到单击事件之前。

^{1只能使用mousedown/mouseup，因为在滚动条上单击时，click不会触发。如果这是错误的，请提供一个可行的示例/代码。}