Firefox：无法拖动 <a> 超链接的 child 元素

Question

考虑以下标记：

<a class="link" href="#">
    <sup draggable="true">Foo</sup> Bar
</a>

现在将 dragstart 事件附加到 sup 元素：

$(document).ready(function () {
    $("sup").on('dragstart', function(e) {
        console.log('shikaka');
    });
});

此事件永远不会触发。我一直在研究，在 Firefox 中，默认情况下链接是可拖动的，所以我认为这可能有效：

$(document).ready(function () {
    $(".link").on('dragstart', function(e) {
         e.preventDefault();
         e.stopPropagation;
         //event return false; does not work.
    });

    $("sup").on('dragstart', function(e) {
        console.log('shikaka');
    });
});

而且，<a class="link" href="#" draggable="false"> 也没有用。

我什至尝试了一些 "crazy" 东西，比如将事件触发到 child:

$(".link").on('dragstart', function (e) {
    e.preventDefault();
    e.stopPropagation;
    $(this).find('sup').trigger('dragstart');
});

互联网上有一些 post 表明您也可以通过取消 mousedown 事件来禁用该事件。上面的任何例子都用 dragenter 和 mousedown 进行了尝试，并且都产生了相同的效果。

我的问题是，有什么方法可以 "short circuit" firefox 中的默认事件，使其触发 child 元素的事件吗？或者，有没有办法只阻止 parent 事件但仍然能够拖动 child 元素？

Answer 1

我正在测试它，如果你从 <a> 标签中删除 href 属性，它就不再可以拖动，事件也不会触发，如果你想两个可拖动元素都向其添加属性 draggable === true，然后拖动事件将在 <a> 和子元素中触发。

我仍然需要 <a> 标签中 href 属性的数据，您可以将其添加为另一个属性，如 data-href 或类似的。

您可以在下面的代码片段中尝试。

document.getElementById('a').addEventListener('dragstart', function() {
  console.log('Dragging a link…');
});

document.getElementById('span').addEventListener('dragstart', function() {
  console.log('Dragging a span…');
});

<a id="a" draggable="true">
  <div id="span" draggable="true">and some more text</div>
</a>

Firefox：无法拖动 <a> 超链接的 child 元素

Firefox: Unable to Drag element child of <a> hyperlink

javascript

firefox

jquery

draggable

drag