jQuery 用户界面；停止传播可选事件

Question

基本上我在 ul 上使用 jQuery ui 的可选 功能，但是ul 通常会有一个滚动条，并且该滚动条在 Webkit 浏览器中变得不可用，因为当您尝试单击它来抓取它时，可选功能的套索会被绘制在顶部。

我制定了一个解决方案，其中涉及检查光标相对于 ul 的位置和宽度的位置，以查看光标是否位于滚动条上方，如果是，则停止可选“开始”事件的传播，但尽管如此条件在应该满足的时候得到满足，既不返回 false 也不停止事件的传播似乎阻止 jQuery 处理可选事件。

以下是我对 jQuery .selectable start 事件的了解：

start: function(event, ui) {
    var t = event.target;
    var cutoff  = t.scrollWidth + t.offsetLeft
    if (event.clientX > cutoff)
    {
        console.log('NO!');
        console.log(event.type);

        //overkill
        event.stopPropagation();
        event.stopImmediatePropagation();

        if (event.stopPropagation) {
          event.stopPropagation();
        } else {
          event.cancelBubble = true;
        }

        return false;
    }
}

所有建议/解决方案均表示赞赏。

Answer 1

start 事件是一个棘手的人造事件。您需要做的是将取消事件冒泡的代码直接附加到 ul 本身的 mousedown 事件，并确保首先执行您的事件处理程序。

您将在 event.stopPropagation 的 jQuery 文档中看到这一小行：

请注意，这不会阻止其他
来自同一元素的处理程序
正在运行。

因此，虽然 event.stopPropagation 将阻止事件在 DOM 上进一步冒泡，但它不会阻止附加到被调用的 ul 的其他事件处理程序。为此，您需要 event.stopImmediatePropagation 来停止调用 selectable 事件处理程序。

基于可选择演示页面，此代码片段成功取消了气泡：

$(function() {
    $("#selectable").mousedown(function (evt) {
        evt.stopImmediatePropagation();
        return false;
    });        
    $("#selectable").selectable();
});

请注意，您必须添加事件在执行 .selectable() 设置函数之前，将处理程序添加到 ul 对象，以便首先潜入并弹出事件气泡。

Answer 2

这是 Sam C 的解决方案的一个细微变化，它对我来说效果更好（仅取消 mousedown 事件，如果它在带有滚动条的元素上触发）：

$(function() {
    $("#selectable").mousedown(function (evt) {
        if ($(evt.originalEvent.target).hasClass('ui-dialog'))  // <--- variation
        {
            evt.stopImmediatePropagation();
            return false;
        }
        return true;
    });        
    $("#selectable").selectable();
});

Answer 3

Sam C 的答案对我不起作用，可能是因为我定位 #selectable 的方式。这就是我使用的：

$('#selectable')
  .mousedown(function (evt) {
    if (event.pageX > $(this).offset().left + $(this).width() - $.getScrollbarWidth())
    {
       evt.stopImmediatePropagation();
       return false;
    }
  })
  .selectable({filter: 'div'});

其中 $.getScrollbarWidth() 来自 这里