目标:
显示鼠标在容器元素中划过时经过的元素,但是容器内肯能会出现大量元素,所以直接给容器元素添加click事件,通过elementFromPoint的API模拟子元素被点击事件效果
看看效果吧
涉及的重要对象 MousEvent
参考 MDN
相关代码
operateContent.value!.addEventListener('dragover', (event) => {event.preventDefault();let target = elementFromPoint(event)if (target == div) returndiv = targetif (target) {if (target.id.startsWith('el')) {operateContent.value!.dispatchEvent(new MouseEvent('click', {'clientX': event.clientX,'clientY': event.clientY,'view': window,'bubbles': true,'cancelable': true,}))}else vnodeStore.clearTarget()}});operateContent.value!.addEventListener('drop', (event) => {event.preventDefault();useCreateBaseElement(event.dataTransfer!.getData('tag') as any)})