拖动属性draggable

一个奇怪的现象：代码如下，设置div是可拖动的，拖动div时会触发dragStart事件

        <div draggable="true" ondragstart="dragStart(event)">
            <a href="#">xxxxx</a>
        </div>

        <script>
            function dragStart(e) {
                console.log(e.target)
            }
        </script>

奇怪的现象如下：当拖动a元素的时候也会触发div的拖动事件

奇怪的现象.gif

正常的现象应该是，只有div绑定了拖动事件，那么只有div才会触发事件，下面我们演示一下正常现象。
我们把a元素改成p元素，其他不变：

        <div draggable="true" ondragstart="dragStart(event)">
            <p>xxxxx</p>
        </div>

这时，不管怎么拖动目标元素都是div而不是p

正常的现象.gif

现在我们把p元素加上draggable="true"

        <div draggable="true" ondragstart="dragStart(event)">
            <p draggable="true">xxxxx</p>
        </div>

可以看到这时p又可以触发div的拖拽事件了

添加draggable属性的p元素.gif

结论

综上，只有绑定了draggable="true"的元素才可以通过冒泡触发父元素的拖拽事件，而a元素并没有绑定draggable="true"，为什么也能触发呢？
因为链接和图像默认是可拖动的（https://www.runoob.com/tags/att-global-draggable.html），他们默认已经绑定了draggable="true"