javascript - JQuery 用户界面；停止可选事件的传播

Question

基本上我用的是jQuery ui's selectable ul 上的功能，但 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 文档中看到这一行:

Note that this will not prevent other handlers on the same element from running.

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

基于selectable demo page ，这段代码片段成功取消了气泡:

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

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