JQuery UI; Остановить распространение выбираемых событий - PullRequest
Новая
       16

JQuery UI; Остановить распространение выбираемых событий

9 голосов
/ 13 ноября 2009

В основном я использую выбираемый jQuery пользовательский интерфейс на 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;
    }
}

Все советы / решения приветствуются, спасибо!

Ответы [ 3 ]

14 голосов
/ 13 ноября 2009

Событие 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(), чтобы сначала проникнуть и всплыть пузырь событий.

2 голосов
/ 17 апреля 2011

Вот небольшое изменение в решении Сэма C , которое работало для меня лучше (только отменив событие mousedown, если оно запущено на элементе с полосой прокрутки): 

$(function() {
    $("#selectable").mousedown(function (evt) {
        if ($(evt.originalEvent.target).hasClass('ui-dialog'))  // <--- variation
        {
            evt.stopImmediatePropagation();
            return false;
        }
        return true;
    });        
    $("#selectable").selectable();
});
1 голос
/ 24 декабря 2009

Ответ Сэма Си мне не помог, возможно, из-за того, как я позиционировал #selectable. Вот что я использовал: 

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

где $ .getScrollbarWidth () от здесь

...