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

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"> 也不起作用。

我什至尝试过一些“疯狂”的东西，比如向孩子触发事件：

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

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

我的问题是，有什么方法可以“短路”firefox 中的默认事件，以使其触发子元素的事件？或者，有什么方法可以只阻止父事件，但仍然可以拖动子元素？。

Answer 1

我正在对其进行测试，如果您从 <a> 标记中删除 href 属性，则它不应再可拖动且事件不应触发，如果您想让两个元素都可拖动添加到它属性draggable === true，然后拖动事件将在<a> 和子元素中触发。

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

您可以在下面的 sn-p 中尝试一下。

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>