7

Backbone.js を使用して、グラフ イメージのさまざまな「領域」にマウスアップおよびダブルクリック イベント用の個別のハンドラをアタッチするグラフ アプリケーションがあります。

ユーザーがチャート画像の「エリア」部分で左ボタンをクリックしたか右クリックしたかを検出するためにマウスアップが必要であり、それに応じてフローをリダイレクトしています。また、チャート画像を含むパネルを拡大または最小化するには、ダブルクリックする必要があります。

ここに問題があります。ダブルクリックするたびにマウスアップが暗黙的に呼び出されるため、最大化/最小化機能が左/右ボタンのクリック機能に干渉します。

シングルマウスアップの後にダブルクリックが続くかどうかを確認するために、タイムアウトなどのさまざまな手法を使用してみました（次のスレッドで提案されているように： ダブルクリックイベントが検出されたときにクリック/マウスアップイベントをキャンセルする必要があります

私にはうまくいきませんでした。また、同じページにグラフを含むビューのさまざまなオブジェクトがあるため、すべてのイベントハンドラーに一意の ID を付けてそれらを区別しています。ダブルクリックを検出し、ダブルクリックが発生した場合にマウスアップを防止する単純なフラグセットリセットメソッドも試しましたが、マウスアップがダブルクリックの前に発生するイベント階層も失敗しました。

全体として、助けてください！前もって感謝します

4

3 に答える 3

3

リンクした回答で与えられたアドバイスに従って、マウスアップのコールバックをデバウンスし、特定の期間に2回目のクリックが発生したかどうかを確認するだけです。

この方法で定義されたビューを想定します ( http://jsfiddle.net/nikoshr/4KSZx/ )

var V = Backbone.View.extend({
    events: {
        'mouseup button': 'onmouseup',
        'dblclick button': 'ondblclick'
    },

    onmouseup: function() {
        console.log('mouseup');
    },    
    ondblclick: function() {
        console.log('dblclick');
    }
});

それを変更して、mouseup イベントを「キャンセル」することができます。

var V = Backbone.View.extend({
    events: {
        'mouseup button': _.debounce(function(e) {
            if (this.doucleckicked) {
                this.doucleckicked = false;
            } else {
                this.onmouseup.call(this, e);
            }
        }, 300),
        'dblclick button': function(e) {
            this.doucleckicked = true;
            this.ondblclick.call(this, e);
        }
    },

    onmouseup: function() {
        console.log('mouseup');
    },    
    ondblclick: function() {
        console.log('dblclick');
    }
});

そしてデモhttp://jsfiddle.net/4KSZx/6/

于 2013-03-22T10:35:53.763 に答える
1

その場合、backbone.js のイベント登録を使用しないでください。

need-to-cancel-click-mouseup-events-when-double-click-event-detected を使用して jQuery イベント登録を使用 する

于 2013-03-22T10:29:53.723 に答える
0

あなたの言ったことを理解したかどうかはわかりませんが...試してみてください：

$(document).click(function(event) {
    // Page variables of the mouse event
    var pageX = event.pageX;
    var pageY = event.pageY;
    var someFunctions = function() {
        /*
        if(pageX == 300 && pageY == 120) {
            event.preventDefault();
            // do functions
        }
        */
    };

    // start the functions
    someFunctions();
});

$(document).dblclick(function() {
   // functions here to dblclick    
});

これじゃなかったらごめんなさい、でもやってみました。

于 2013-03-22T09:32:38.830 に答える