javascript - 使用 Scriptaculous 拖放防止 JavaScript 点击事件

Question

我在页面上有一些可拖动的元素。这些相同的元素具有导航到另一个页面的单击事件。我正在尝试确定在用户拖动时防止单击事件触发的最佳方法，但如果不拖动仍允许单击事件。任何人都对实现这一目标的最佳方法有任何想法？

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

像下面这样的东西可能会起作用（并防止点击事件被触发）

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 之后仍然处于活动状态的剩余单击事件，以重新创建原始处理程序。我希望这可以帮助那里的人:)