基本上我在一个ul上使用了
jQuery ui’s selectable功能,但是ul通常会有一个滚动条,而且这个滚动条在Webkit浏览器中变得无法使用,因为当你尝试点击它来抓取它时,可选择的功能的套索反而被绘制.
我已经制定了一个解决方案,其中包括检查光标的位置和宽度,以查看光标是否在滚动条上,如果是,停止传播可选择的“开始”事件,但尽管条件满足时,应该是,不返回false或停止进度的事件似乎阻止jquery进行可选择的事件.
这是我为jquery .selectable启动事件我有
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;
}
}
所有建议/解决方案赞赏,谢谢！
解决方法
开始事件是一个巧妙的人造的事件.您需要做的是附加代码以将事件冒泡直接取消到ul本身的mousedown事件,并确保先执行事件处理程序.
你会在jQuery文档中看到event.stopPropagation这个小行：
Note that this will not prevent other
handlers on the same element from
running.
所以,尽管event.stopPropagation会阻止事件在DOM上进一步冒泡,但是它不会阻止其他事件处理程序附加到被调用的ul.为此,您需要event.stopImmediatePropagation来停止可选事件处理程序的调用.
基于selectable demo page,此代码段可以成功取消泡沫：
$(function() {
$("#selectable").mousedown(function (evt) {
evt.stopImmediatePropagation();
return false;
});
$("#selectable").selectable();
});
