我在页面上有一些可拖拽的元素。这些元素还有一个点击事件,用于导航到另一个页面。我正在尝试确定最佳方法,以防止在用户拖动时触发点击事件,但仍允许在不拖动时触发点击事件。有没有人有任何想法可以实现这个功能?
我在页面上有一些可拖拽的元素。这些元素还有一个点击事件,用于导航到另一个页面。我正在尝试确定最佳方法,以防止在用户拖动时触发点击事件,但仍允许在不拖动时触发点击事件。有没有人有任何想法可以实现这个功能?
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
});
var click_func;
function onDragStart(drgObj,mouseEvent){
click_func = mouseEvent.target.onclick;
mouseEvent.target.onclick = function(e){
mouseEvent.target.onclick = click_func;
return false;
}
}
你也可以用另一种方式实现这个功能。在开始拖动时,停止观察该对象。然后再次观察点击事件,这将导致一个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之后仍处于活动状态的剩余点击事件,以便重新创建原始处理程序。我希望这能帮助到某个人 :)
类似以下代码可能会解决问题(并且防止点击事件被触发)
new Draggable('tag',
{
revert:function()
{
$('tag').onclick = function(){return false;};
setTimeout('$(\'tag\').onclick = function(){return true;}','500');
return true;
}
}
);