JavaScript：在链接上拖动鼠标

问题描述：

我正在尝试创建日历页面，您可以在其中单击并拖动以一次选择多个日历天。在谷歌浏览器中一切正常，但在Firefox中，当我尝试开始拖动时，它失败。原因是每个日历日都包含在链接中（<a></a>）。当您尝试在Firefox中拖动链接时，它会执行自己的操作。有什么办法可以阻止或解决这个问题吗？JavaScript：在链接上拖动鼠标

答

我就遇到了这个问题，看到你的线程。在我的情况下，我处理较低级别的鼠标事件，而不是点击。我发现，在jQuery的mousedown（http://docs.jquery.com/Events/mousedown#fn）上，我可以禁止Firefox针对传入鼠标事件调用event.preventDefault（http://docs.jquery.com/Events/jQuery.Event#event.preventDefault.28.29）的特殊行为。

我在其他事件处理程序上调用它，但我怀疑只是mousedown（）足以阻止浏览器执行其自定义拖动行为。

我以为我曾尝试过，但也许我只是尝试点击event.preventDefault。无论哪种方式，我只是将链接更改为div，并解决了我的问题。 – 2009-08-15 17:05:22

答

如果您使用的是jQuery，请执行以下操作。（“a”）.click（function（）{ return false; }）;

返回false可防止浏览器的默认值。

我正在使用jQuery，但没有奏效。我试过Firefox的event.preventDefault（）;以及。 – 2009-07-06 03:14:32

答

对于IE，你还可以添加：

// prevent text selection in IE 
    document.onselectstart = function() { return false; }; 
    // prevent IE from trying to drag an element 
    target.ondragstart = function() { return false; };

答

嗯，也许这是有点晚了。但如果你没有提到这个话题，也许我从来没有解决过这个问题。我也遇到了同样的问题，所以我开始深入了解事件是如何进行的。环境是这样的：

我们的可拖动项目：

<div id="sender"><a href="http://www.ourlinktodestination.com">my title</a></div>

我们投掷的物品：

<table><tr><td class="celdarec">&nbsp;</td></tr><table>

所以这里是：

jQuery(document).ready(function($) { 
    var globalEle, globalLink; 

    $(".sender").draggable({ 
     revert:'invalid', 
     start:function(event, ui){ 
      globalEle = $(this); 
      globalLink = $(this).find("a").attr("href"); 
     }, 
     stop:function(event, ui){ 
      globalEle = null; 
     } 
    }); 

    $("#tablareceptora .celdarec").droppable({ 
     accept: '.sender', 
     hoverClass: 'drop_hover', 
     drop: function(event, ui){ 
      $(this).html(globalEle.html()); 
      $(this).find("a").attr("href", globalLink); 
      globalEle.remove(); 
     }, 
     tolerance: 'pointer' 
    }); 

    $(".sender").delegate("a", "mouseup", function(e){ 
     e.target.href ="javascript:void(0)"; 
    }); 
});

（我使用jQuery以及wordpress文件夹中的jQuery ui，所以这就是为什么第一行使用“jQuery”语句代替o f“$”并将这个最后一个作为参数放在处理程序中）。

当您单击拖动，达到event.target.href和充斥着我们的链接。由于我无法解释（但）的原因，即使使用preventDefault，在mouseup事件上，使用委托语句，传递给可放置区域的元素，链接仍然会重定向到它。
我们假设事件响应点击动作......“点击”，它表示：鼠标向下并且鼠标向上...但这里是事情：我用可拖动的“开始”选项这样的：
```
globalLink = $(this).find("a").attr("href"); 
```
全球通是外部声明的变量（在脚本的开始），所以当你开始拖动，将链接发送给这个变量。然后，在可拖动的元素上（在我的例子中是一个名为sender的类），您必须使用委托语句，在“mouseup”事件中寻找“a”字幕并将“＃”放在目标上。事件的HREF设置通过：
```
$(".sender").delegate("a", "mouseup", function(e){ 
    e.target.href = "javascript:void(0)"; 
}); 
```
这将避免工作过的preventDefault语句（我假设是从谁是在回避这个限制的情况下发生）的任何行为。
最后你将链接放在“a”选框上。但是，如果我们只是放在单元格上，如果您使用萤火虫并检查代码，则href属性具有在mouseup事件上传递的“javascript：void（0）”。这可以回答很多问题，比如在drop操作中如何触发重定向行为。意思是jquery ui正在处理defaultPrevent，因为droppable事件的重定向行为是一种编程行为。所以这就是为什么我保存在外部变量的联系，这样我就可以在投掷的设置重新分配它的下降事件：
```
$(this).find("a").attr("href", globalLink); 
```

希望这可以帮助任何其他男生还是女生是谁在同情况

对每个人都好！

很酷。而不是`jQuery（document）.ready（function（$）{`，你可以使用：`jQuery（function（$）{` – 2012-11-16 16:06:58

JavaScript：在链接上拖动鼠标

相关推荐