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

Question

基本上我在a上使用jQuery ui的可选功能ul,但是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调用事件处理程序.

根据可选择的演示页面,此代码段成功取消了泡泡:

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

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