javascript - Firefox:无法拖动 超链接的子元素

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">也没有用。

我什至尝试过一些“疯狂”的东西，例如向 child 触发事件:

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

互联网上有一些帖子表明您还可以通过取消mousedown来禁用该事件。事件。上述任何示例都尝试使用 dragenter和mousedown并且都具有相同的效果。

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

Answer 1

我一直在测试它，如果你删除href来自 <a> 的属性标签它不应该再是可拖动的，并且事件不应该触发，如果您想让两个元素都可拖动，请添加属性 draggable === true ，然后拖动事件将在 <a> 中触发以及 children 。

我你还需要href的数据<a> 中的属性标签，您可以将其添加为另一个属性，例如 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>