Question

基本上我在ul上使用jQuery ui's selectable功能，但是ul通常会有一个滚动条，这个滚动条在Webkit浏览器中变得无法使用，因为当你试图点击它来抓取它时，可选功能的套索反而被拉过来了。

我已经制定了一个解决方案，其中包括检查光标相对于ul的位置和宽度的位置，以查看光标是否在滚动条上方，如果是，则停止传播可选择的“start”事件，但尽管条件符合应有的条件，既不返回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事件是一个棘手的虚假事件。您需要做的是附加代码以直接取消事件冒泡到mousedown本身的ul事件，并确保首先执行事件处理程序。

你会在jQuery文档中看到event.stopPropagation这个小行：

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

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

根据selectable demo page，此代码段成功取消了气泡：

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

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

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（）来自here

JQuery UI;停止可选事件的传播

3 个答案: