使用Scriptaculous拖放功能防止JavaScript点击事件

Question

我在页面上有一些可拖拽的元素。这些元素还有一个点击事件，用于导航到另一个页面。我正在尝试确定最佳方法，以防止在用户拖动时触发点击事件，但仍允许在不拖动时触发点击事件。有没有人有任何想法可以实现这个功能？

- digitalsanctum

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

- digitalsanctum

---

您能否将点击事件保存以便稍后重新连接？ - mercutio

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

- Tony

Answer 3

你也可以用另一种方式实现这个功能。在开始拖动时，停止观察该对象。然后再次观察点击事件，这将导致一个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之后仍处于活动状态的剩余点击事件，以便重新创建原始处理程序。我希望这能帮助到某个人 :)

- Stanley85

Answer 4

类似以下代码可能会解决问题（并且防止点击事件被触发）

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

- VonC

---

谢谢，但这并没有完全起作用。它甚至在超时后仍然阻止了点击事件的发生。似乎应该有一个更简洁的解决方案。 - digitalsanctum