dragstart事件目标是父项，但我单击了输入

Question

如果用户单击并从输入中拖动，我将尝试取消dragstart事件，但是事件数据的父级具有draggable属性作为target。

执行此操作的最佳方法是什么，因为当前用户无法通过单击和拖动来选择输入中的文本。

我正在将此代码实现到Vue组件中，并从下面的代码进行扩展：

<script>
    export default {
        data: function() {
            return {
                dragStartClass: 'drag-start',
                dragEnterClass: 'drag-enter',
                activeIndex: null
            }
        },
        methods: {

            setClass: function(dragStatus) {
                switch (dragStatus) {
                    case 0:
                        return null;
                    case 1:
                        return this.dragStartClass;
                    case 2:
                        return this.dragEnterClass;
                    case 3:
                        return this.dragStartClass + ' ' + this.dragEnterClass;
                }
            },
            onDragStart: function(event, index) {

                console.log(event);

                this.activeIndex = index;
                this.data.data[index].dragCurrent = true;

                this.data.data[index].dragStatus = 3;

            },
            onDragLeave: function(event, index) {

                this.data.data[index].counter--;

                if (this.data.data[index].counter !== 0) return;

                if (this.data.data[index].dragStatus === 3) {
                    this.data.data[index].dragStatus = 1;
                    return;
                }
                this.data.data[index].dragStatus = 0;
            },
            onDragEnter: function(event, index) {

                this.data.data[index].counter++;

                if (this.data.data[index].dragCurrent) {
                    this.data.data[index].dragStatus = 3;
                    return;
                }
                this.data.data[index].dragStatus = 2;
            },
            onDragOver: function(event, index) {
                if (event.preventDefault) {
                    event.preventDefault();
                }
                event.dataTransfer.dropEffect = 'move';
                return false;
            },
            onDragEnd: function(event, index) {
                this.data.data[index].dragStatus = 0;
                this.data.data[index].dragCurrent = false;
            },
            onDrop: function(event, index) {

                if (event.stopPropagation) {
                    event.stopPropagation();
                }

                if (this.activeIndex !== index) {
                    this.data.data = this.array_move(this.data.data, this.activeIndex, index);
                }

                for (let index in this.data.data) {
                    if (!this.data.data.hasOwnProperty(index)) continue;
                    this.data.data[index].dragStatus = 0;
                    this.data.data[index].counter = 0;
                    this.data.data[index].dragCurrent = false;
                }

                return false;
            },
            array_move: function(arr, old_index, new_index) {
                if (new_index >= arr.length) {
                    let k = new_index - arr.length + 1;
                    while (k--) {
                        arr.push(undefined);
                    }
                }
                arr.splice(new_index, 0, arr.splice(old_index, 1)[0]);
                return arr; // for testing
            }
        }
    }
</script>