Предотвращение события щелчка JavaScript с помощью Scriptaculous перетаскивания

Question

У меня есть некоторые элементы на странице, которые можно перетаскивать. Эти же элементы имеют событие щелчка, которое перемещается на другую страницу. Я пытаюсь определить лучший способ предотвратить событие click, если пользователь перетаскивает, но все же разрешить событие click, если не перетаскивает. У кого-нибудь есть идеи, как лучше всего это сделать?

Answer 1

Я решил это, используя что-то вроде следующего:

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 2

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 3

Вы также можете сделать это по-другому. На вашем 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, чтобы просто воссоздать оригинальный обработчик. Я надеюсь, что это поможет кому-то там:)

Answer 4

Что-то вроде следующего может помочь (и предотвратить запуск события click)

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