9

基本上我在 a 上使用jQuery ui 的可选功能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;
    }
}

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

4

3 回答 3

15

该start事件是一个狡猾的假事件。您需要做的是附加您的代码以取消事件冒泡直接到mousedown事件ul本身，并确保首先执行您的事件处理程序。

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

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

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

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

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

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

于 2009-11-13T11:35:27.380 回答
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();
});
于 2011-04-17T15:25:41.867 回答
1

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

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

$.getScrollbarWidth() 来自这里

于 2009-12-23T21:21:57.357 回答