javascript - Scriptaculous ドラッグ アンド ドロップで JavaScript クリック イベントを防止する

Question

ページにドラッグ可能な要素がいくつかあります。これらの同じ要素には、別のページに移動するクリック イベントがあります。ユーザーがドラッグしている場合にクリックイベントが発生しないようにする最善の方法を決定しようとしていますが、ドラッグしていない場合でもクリックイベントを許可します。これを達成するための最良の方法のアイデアはありますか?

Answer 1

var click_func;
function onDragStart(drgObj,mouseEvent){
    click_func = mouseEvent.target.onclick;

    mouseEvent.target.onclick = function(e){
        mouseEvent.target.onclick = click_func;
        return false;
    }
}

Answer 2

次のようなものを使用してこれを解決しました。

new Draggable('id', {
    onStart: function() {
        dPhoto = $('id');
        Event.stopObserving('id', 'click');
    },
    onEnd : function() {
        setTimeout("Event.observe('id', 'click', function() { location.href = 'url'; });", 500);
    },
    revert: true
});

Answer 3

次のようなものがうまくいくかもしれません（そして、クリックイベントが発生するのを防ぎます）

new Draggable('tag',  
    {
        revert:function()
        {
            $('tag').onclick = function(){return false;};
            setTimeout('$(\'tag\').onclick = function(){return true;}','500');  
            return true;
        }
    }
);

Answer 4

これを別の方法で行うこともできます。startDrag で、オブジェクトの観察を停止します。次に、最初のイベントハンドラーを再作成する enddrag 関数につながるクリックをもう一度観察します。

function onDragStart() {
    Event.stopObserving(this.OBJECT,'click');
    Event.observe(this.OBJECT,'click',this.onDragEnd.bindAsEventListener(this));
}

function onDragEnd() {
    Event.stopObserving(this.OBJECT,'click');
    Event.observe(this.OBJECT,'click',this.PREVIOUSFUNCTION.bindAsEventListener(this));
}

これにより、元のハンドラーを再作成するために enddrag の後にまだアクティブな残りのクリック イベントがキャッチされます。これが誰かに役立つことを願っています:)