Firefox：无法拖动< a>的元素子元素超链接 [英] Firefox: Unable to Drag element child of <a> hyperlink

问题描述

考虑以下标记：

 < a class =linkhref =＃> 
< sup draggable =true> Foo< / sup>栏
< / a> 
  

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

  $（document）.ready（function（）{ （'dragstart'，function（e）{
 console.log（'shikaka'）; 
}）; 
}）; 
 $（sup 
  

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

$ $ p $ $ $ $ ）。（）函数（）{
e.preventDefault（）;
。 b $ b // event return false; does not work。
}）;
$ b $（sup）。on（'dragstart'，function（e）{
console.log（'shikaka'）;
}）;
}）;

< a class =linkhref =＃ draggable =false> 也没有效果。

我甚至尝试过一些疯狂孩子：
$ b $ pre $ $（。link）。on（'dragstart'，function（e）{
e.preventDefault（）;
e.stopPropagation;
$（this）.find（'sup'）。trigger（'dragstart'）;
}）;


在互联网上有一些帖子显示你也可以通过取消 mousedown 事件。以上任何一个使用 dragenter 和 mousedown 的例子都有相同的效果。

我的问题是，是否有任何方法来短路在Firefox中的默认事件，使其触发子元素的事件呢？或者，有没有什么办法可以防止父事件，但仍然可以拖动子元素？

解决方案

如果你从< a> 标签中删除 href 属性，它不应该是可拖动的并且事件不应该触发，如果你想让这两个元素都可以拖动，添加属性 draggable === true ，然后拖动事件将在< a> 和孩子。

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



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


 
 < a id =adraggable =true> < div id =spandraggable =true> and some more text< / div>< / a>  
 




Consider the following markup:

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

Now attach a dragstart event to the sup element:

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

This event will never fire. I've been researching and in Firefox, links are draggable by default, so I thought that this might work:

$(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');
    });
});

And, doing <a class="link" href="#" draggable="false"> did not work either.

I've even tried some "crazy" stuff like triggering the event to the child:

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

There are some post around the internet that show that you can also disable the event by cancelling the mousedown event. Any of the above examples where tried with dragenter and mousedown and all had the same effect.

My question is, is there any way to "short circuit" the default event in firefox to make it trigger the child element's event instead? Or, is there any way to only prevent the parent event but still be able to drag the child element?.

解决方案

I've being testing it, and if you remove the href attribute from the <a> tag it should not be draggable anymore and the event should not fire, and if you like to make both elements draggable add to it the attribute draggable === true, and then the drag event will fire in the <a> and in the children.

I you still need the data of the href attribute in the in the <a> tag, you could add it as another attribute like data-href or similar.

You could try it in the snippet below.

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：无法拖动&lt; a&gt;的元素子元素超链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！