事件 – 确定用户是否单击滚动条或内容(onclick for native scroll bar)

我试图在JQuery中创建自定义事件，应该检测什么时候滚动条被点击1。
我知道有很多文本，但我的所有问题都是粗体，有一个 JSFiddle example，你可以直接工作。

因为我还没有找到任何内置的功能，
我不得不创建一个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,y);
    }

    return bInX || bInY;
}

所有滚动条大小是否统一？例如在Firefox和IE它的18px。
假设没有自定义滚动条，一些浏览器中是否有任何额外的填充或大小？

这些功能都是按预期执行的(从我可以看出来)。

做自定义事件有点棘手，但我得到它工作有点。唯一的问题是，如果被点击的元素有一个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",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.");
});

如何阻止其他“点击”事件触发？

虽然我问，请随时优化代码尽可能。

Here’s a JSFiddle to mess around with.

我这样做的原因是因为一个更大的插件，我正在开发。它有一个自定义上下文菜单，当我右键单击一个滚动条时显示。我不想要。所以我想我应该做一个事件，检查滚动点击(mouseup / downs)，然后防止上下文菜单显示。为了做到这一点，我需要滚动点击在正常点击之前，如果可能，停止正常点击发射。

我只是在这里大声喧哗，但也许有一种方法来获得绑定到元素的所有功能，然后切换它们添加的顺序？我知道函数按它们添加的顺序执行(第一次添加第一次调用)，因此，如果我可以进入该过程，也许整个“注册”事件到JQuery可以在点击事件之前插入。

1只能使用mousedown / mouseup，因为在单击滚动条时不会触发点击。如果这是假的，请提供一个工作示例/代码

$.fn.mousedown = function(data,fn) {
    if ( fn == null ) {
        fn = data;
        data = null;
    }    
    var o = fn;
    fn = function(e){
        if(!inScrollRange(e)) {
            return o.apply(this,arguments);
        }
        return;
    };
    if ( arguments.length > 0 ) {
        return this.bind( "mousedown",fn );
    } 
    return this.trigger( "mousedown" );
};

$.fn.mousedownScroll = function(data,fn) {
    if ( fn == null ) {
        fn = data;
        data = null;
    }    
    var o = fn;
    fn = function(e){
        if(inScrollRange(e)) {
            e.type = "mousedownscroll";
            return o.apply(this,fn );
    } 
    return this.trigger( "mousedown" );
};