最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - JQuery UI; Stop propagation of selectable events - Stack Overflow

programmeradmin2浏览0评论

Basically I am using jQuery ui's selectable functionality on a ul, but the ul will often times have a scrollbar, and this scrollbar becomes unusable in Webkit browsers since when you try to click on it to grab it, the lasso for the selectable functionality is drawn overtop instead.

I have formulated a solution, which involves checking the position of the cursor in relation to the position and width of the ul to see if the cursor is over the scrollbar, and if so, stop propagation of the selectable 'start' event, but despite the conditional being met when it should be, neither returning false nor stopping progation of the event seems to prevent jQuery from progressing through the selectable events.

Here is what I have for the jQuery .selectable start event:

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;
    }
}

All advice/solutions appreciated.

Basically I am using jQuery ui's selectable functionality on a ul, but the ul will often times have a scrollbar, and this scrollbar becomes unusable in Webkit browsers since when you try to click on it to grab it, the lasso for the selectable functionality is drawn overtop instead.

I have formulated a solution, which involves checking the position of the cursor in relation to the position and width of the ul to see if the cursor is over the scrollbar, and if so, stop propagation of the selectable 'start' event, but despite the conditional being met when it should be, neither returning false nor stopping progation of the event seems to prevent jQuery from progressing through the selectable events.

Here is what I have for the jQuery .selectable start event:

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;
    }
}

All advice/solutions appreciated.

Share Improve this question edited Oct 17, 2021 at 16:18 Brian Tompsett - 汤莱恩 5,88372 gold badges61 silver badges133 bronze badges asked Nov 12, 2009 at 22:51 machinemessiahmachinemessiah 4241 gold badge5 silver badges14 bronze badges 1
  • When you say, "the lasso for the selectable functionality is drawn overtop instead", what is this lasso you're referring to? Can you take a screenshot? – Sam C Commented Nov 13, 2009 at 6:24
Add a comment  | 

3 Answers 3

Reset to default 15

The start event is a tricksy faux one. What you need to do is attach your code to cancel event bubbling directly to the mousedown event of the ul itself, and make sure your event handler is executed first.

You'll see in the jQuery docs for event.stopPropagation this little line:

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

So, whilst event.stopPropagation will stop the event bubbling any further up the DOM, it won't stop the other event handlers attach to the ul being called. For that you need event.stopImmediatePropagation to stop the selectable event handler getting called.

Based on the selectable demo page, this code snippet successfully cancels the bubble:

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

Note that you must add your event handler to the ul object before you execute the .selectable() setup function in order to sneak in and pop the event bubble first.

Here's a slight variation on Sam C's solution that worked better for me (by only cancelling the mousedown event if it's fired on the element with the scrollbar):

$(function() {
    $("#selectable").mousedown(function (evt) {
        if ($(evt.originalEvent.target).hasClass('ui-dialog'))  // <--- variation
        {
            evt.stopImmediatePropagation();
            return false;
        }
        return true;
    });        
    $("#selectable").selectable();
});

Sam C's answer didn't work for me, probably because of the way I'd positioned #selectable. This is what I used:

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

where $.getScrollbarWidth() is from here

发布评论

评论列表(0)

  1. 暂无评论