Preventing JavaScript click event with Scriptaculous drag and drop

问题

I have some elements on a page which are draggable. These same elements have a click event which navigates to another page. I'm trying to determine the best way of preventing the click event from firing if the user is dragging but still allow the click event if not dragging. Anyone have any ideas of the best way to accomplish this?

回答1:

I solved this by using something like the following:

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
});

回答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;
    }
}

回答3:

Something like the following might do the trick (and prevent the click event to be fired up)

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

回答4:

You can also do this another way. On your startDrag you stop observing the object. Then you observe the click again which leads to an enddrag function which recreates the first eventhandler.

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));
}

This will catch the leftover click event which is still active after the enddrag to just recreate the original handler. I hope this helps somebody out there :)

来源：https://stackoverflow.com/questions/274843/preventing-javascript-click-event-with-scriptaculous-drag-and-drop

标签

javascript

events

event-handling

drag-and-drop

scriptaculous