通過Scriptaculous拖放防止JavaScript click事件

Question

我在頁面上有一些可拖動的元素。 這些相同的元素都有一個click事件，該事件導航到另一個頁面。 我正在嘗試確定防止用戶拖動時觸發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));
}

這將捕獲剩余的click事件，該事件在結束拖動后仍保持活動狀態，以重新創建原始處理程序。 我希望這可以幫助某人:)

Answer 4

像下面這樣的東西可能會解決問題（並防止觸發click事件）

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