Question

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

Answer 1

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

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

Answer 2

嗯，好吧也许这有点晚了。但如果你没有提出这个话题，也许我永远不会解决这个问题。我遇到了同样的问题，所以我开始在脑海里画出事件是如何起作用的。环境就是这样：

我们的可拖动项目：

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

（我正在使用wordpress文件夹中的jQuery和jQuery ui，这就是为什么第一行使用“jQuery”语句而不是“$”并将最后一行放在处理程序上作为参数）。

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

希望这可以帮助处于相同情况的任何其他男人或女孩

每个人都有良好的共鸣！

Answer 3

如果您正在使用jQuery，请执行以下操作。 $（“a”）。click（function（）{ 返回false; }）;

return false会阻止浏览器的默认设置。

Answer 4

对于IE，您还可以添加：

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

JavaScript：在链接上拖动鼠标

4 个答案: