脚本化拖拽:拖拽元素时需要取消onClick动作
感谢您的三个出色的回答，它们都指出了我使用"onclick = ...“的问题。而不是“观察(”单击“，...”
但接受答案的奖项必须授予Paolo Bergantino，因为它添加了一个类名来标记拖动的元素，这为我节省了更多的工作！
在我的HTML中，我有一个表格，每一行都有一个图像链接。
<table class="search_results">
<tr>
<td class="thumbnail"><a href="..."><img src="..." /></a></td>
...包含的Javascript文件包含使图像可拖动的代码：
$$( ".thumbnail a img" ).each(
function( img )
{
new Draggable( img, {revert:true} );
}
);和一个简单的处理程序来检测拖拽的结束
Draggables.addObserver({
onEnd:function( eventName, draggable, event )
{
// alert ( eventName ); // leaving this in stops IE from following the link
event.preventDefault(); // Does Not Work !!!
// event.stop(); // Does Not Work either !!!
}
});我的想法是，当图像被点击时，链接应该被跟随，但当它被拖动时，应该会发生其他事情。
实际上，当图像被拖动时，处理程序会被调用，但链接仍然会被跟踪。
我想我取消了一个错误的活动。
如何在拖拽元素后防止链接被跟踪？
编辑:在尝试greystate的建议后添加了event.stop
我现在有了一个适用于FireFox、Apache等的基本解决方案，请看下面我自己的答案。
但我仍然在为IE7 (希望是IE6)寻找解决方案。
在IE中拖动图像时的另一个问题是，当工具提示出现时，图像与鼠标指针分离，您必须释放鼠标并再次单击图像以重新获得拖动。因此，我也在寻找任何可能有助于解决这个问题的想法。
回答 6
Stack Overflow用户
发布于 2009-02-24 12:18:52
<script>
document.observe("dom:loaded", function() {
$$( ".thumbnail a img" ).each(function(img) {
new Draggable(img, {
revert: true,
onEnd: function(draggable, event) {
$(draggable.element).up('a').addClassName('been_dragged');
}
});
});
$$(".thumbnail a").each(function(a) {
Event.observe(a, 'click', function(event) {
var a = Event.findElement(event, 'a');
if(a.hasClassName('been_dragged')) {
event.preventDefault();
// or do whatever else
}
});
});
});
</script>适用于我的火狐，IE。它在某种程度上使用了你的‘标记’的想法，但是我认为用一个类来标记一个已经被拖动的元素要比javascript变量更优雅。
Stack Overflow用户
发布于 2009-02-24 11:40:14
// for keeping track of the dragged anchor
var anchorID = null;
// register a click handler on all anchors
$$('.thumbnail a').invoke('observe', 'click', function(e) {
var a = e.findElement('a');
// stop the event from propagating if this anchor was dragged
if (a.id == anchorID) {
e.stop();
anchorID = null;
}
});
$$('.thumbnail a img').each(function(img) {
new Draggable(img, { revert:true });
});
Draggables.addObserver({
onStart: function(eventName, draggable, e) {
// store the dragged anchor
anchorID = e.findElement('a').id;
}
});Stack Overflow用户
发布于 2009-02-24 11:30:04
好吧，我找到的方法是使用一个“拖动状态”变量，类似于你之前的帖子，但它在IE7和FF下都有效。
使用Prototype，您可以为您想要拖动的html元素的单击事件添加一个观察者函数，在那里告诉event.stop();。此操作扩展(即原型化)要传递给处理程序函数的事件对象，从而丰富了所有Prototype附加方法，并使其能够调用stop()方法，而无需担心它运行到的浏览器，因为Prototype为您管理此方面。
下面是我的示例代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="lib/prototype.js"></script>
<script type="text/javascript" src="src/scriptaculous.js"></script>
<title>Draggables Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="dragme"><a href="http://www.google.it">Ok, you can drag this one.</a></div>
<script type="text/javascript">
function processIt(event) {
if ( isDragging ) {
event.stop();
}
isDragging = false;
}
new Draggable('dragme', { revert: false });
var isDragging = false;
$('dragme').observe('click', processIt );
Draggables.addObserver({
onDrag:function( eventName, draggable, event ) {
isDragging = true;
}
});
</script>
</body>
</html>不同之处在于，在您的原始示例中，您将事件视为标准DOM事件(请参阅页面底部的参数规范here )，这对于FF是可以的，但对于IE则完全不同，因为它以稍微(但绝对)不同的方式处理事件。最重要的是，您在onEnd:处理程序中处理的事件不是单击事件，而是onend事件。
https://stackoverflow.com/questions/552905
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号