Question

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?.

Answer 1

我正在对其进行测试，如果您从import csv def readFile(): count = 0 #print repr(open("FFA.csv", "rb").read(200)) #dump 1st 200 bytes check if null values produced. with open("FFA.csv","rb") as csvfile: FFAreader = csv.reader(csvfile, delimiter=",") for row in FFAreader: idd = row[0] name = row[1] pos = row[2] team = row[3] pts = row[4] oecr = row[5] oR = row[6] posR = row[7] up = row[8] low =row[9] risk = row[10] swing = row[11] readFile()标记中删除href属性，则它不应再拖动，并且该事件不应该触发，如果您想要同时生成这两个元素draggable将属性<a>添加到其中，然后拖动事件将在draggable === true和子项中触发。

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

您可以在下面的代码段中试用它。

<a>

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

Firefox：无法拖动<a> hyperlink

1 个答案: