9

基本的に、私は で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し、イベントハンドラーが最初に実行されることを確認することです。

event.stopPropagationこの小さな行のjQueryドキュメントに表示されます。

これにより、同じ要素上の他のハンドラーの実行が妨げられることはないことに注意してください。

その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

サム 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 に答える