events - 确定用户是否单击滚动条或内容(onclick 对于 native 滚动条)

Question

我正在尝试在 JQuery 中创建自定义事件，这些事件应该检测何时单击滚动条¹。
我知道有很多文字，但我所有的问题都以粗体显示，并且有一个 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, x, 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", 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.");
});

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

当我询问时，请尽可能优化代码。

<强> Here's a JSFiddle to mess around with.

我这样做的原因是因为我正在开发一个更大的插件。当我右键单击其中一个滚动条时，它会显示一个自定义上下文菜单。我不想那样。所以我想我应该创建一个事件来检查滚动点击(鼠标向上/向下)，然后阻止显示上下文菜单。不过，为了做到这一点，我需要在正常点击之前进行滚动点击，并且如果可能的话，停止触发正常点击。

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

<小时/>

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

Answer 1

已解决:

我能想到的最短的滚动条点击检测，在 IE、Firefox、Chrome 上进行了测试。

var clickedOnScrollbar = function(mouseX){
  if( $(window).outerWidth() <= mouseX ){
    return true;
  }
}

$(document).mousedown(function(e){
  if( clickedOnScrollbar(e.clientX) ){
    alert("clicked on scrollbar");
  }
});

工作示例: https://jsfiddle.net/s6mho19z/