Firefox：无法拖动超链接的元素子项

考虑以下标记：

 Foo Bar  

现在将一个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'); }); }); 

并且， 也不起作用。

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

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

互联网上有一些post表明你也可以通过取消mousedown事件来禁用该事件。 以上任何一个尝试使用dragenter和mousedown例子都具有相同的效果。

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

Answer 1

我正在测试它，如果从标签中删除href属性，它就不应该是可拖动的，并且事件不应该触发，如果你想使两个元素都可拖动，则添加属性draggable === true ，然后拖动事件将在和子项中触发。

我仍然需要标签中的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…'); }); 

  
and some more text