e.stoppropagation()
时间: 2023-04-30 19:00:53 浏览: 60
e.stopPropagation()是一个JavaScript中的方法,用于阻止事件继续传播到父元素或其他元素。这个方法可以在事件处理程序中调用,以确保事件只在当前元素中处理,而不会继续向上传播到其他元素。
相关问题
e.stopPropagation()移动端
e.stopPropagation() 是 JavaScript 中的一个方法,用于阻止事件冒泡。在移动端,当用户点击某个元素时,会触发该元素上的 click 事件,并且该事件会一直向上冒泡,直到到达文档根元素。如果在某个父元素上绑定了 click 事件,那么点击子元素时,该事件也会被触发。如果不想让该事件向上冒泡,可以在子元素的 click 事件处理函数中调用 e.stopPropagation() 方法,这样该事件就不会被触发父元素上的事件处理函数了。
// draggable.js import { onMounted, onBeforeUnmount } from 'vue' export default { mounted(el) { console.log('el',el) el.setAttribute('draggable', true) let startX, startY, initialLeft, initialTop, currentX, currentY const onDragStart = (e) => { console.log('e',e.preventDefault()) e.stopPropagation() // e.preventDefault() startX = e.clientX || e.touches[0].clientX startY = e.clientY || e.touches[0].clientY initialLeft = el.offsetLeft initialTop = el.offsetTop el.classList.add('dragging') } const onDrag = (e) => { e.stopPropagation() currentX = (e.clientX || e.touches[0].clientX) - startX currentY = (e.clientY || e.touches[0].clientY) - startY el.style.left = `${initialLeft + currentX}px` el.style.top = `${initialTop + currentY}px` } const onDragEnd = (e) => { e.stopPropagation() el.classList.remove('dragging') } el.addEventListener('dragstart', onDragStart) el.addEventListener('drag', onDrag) el.addEventListener('dragend', onDragEnd) el.addEventListener('touchstart', onDragStart) el.addEventListener('touchmove', onDrag) el.addEventListener('touchend', onDragEnd) onMounted(() => { el.classList.add('draggable') }) onBeforeUnmount(() => { el.removeEventListener('dragstart', onDragStart) el.removeEventListener('drag', onDrag) el.removeEventListener('dragend', onDragEnd) el.removeEventListener('touchstart', onDragStart) el.removeEventListener('touchmove', onDrag) el.removeEventListener('touchend', onDragEnd) el.classList.remove('draggable') el.classList.remove('dragging') }) } } 为什么拖拽时会出现虚影,残影, 怎么解决这个问题
出现拖拽时的虚影、残影问题,是因为浏览器默认会在拖拽时添加一个半透明的影像,以便用户可以清楚地看到拖拽的对象和目标位置。这个影像在拖拽结束后会自动消失。
您可以尝试在dragstart事件中调用setData方法来阻止浏览器默认的影像行为,例如:
```
const onDragStart = (e) => {
e.stopPropagation();
e.dataTransfer.setData('text/plain', ''); // 阻止浏览器默认影像
startX = e.clientX || e.touches[0].clientX;
startY = e.clientY || e.touches[0].clientY;
initialLeft = el.offsetLeft;
initialTop = el.offsetTop;
el.classList.add('dragging');
};
```
此外,您还可以在CSS中使用`-webkit-user-drag: none;`来阻止元素的默认拖拽效果,例如:
```
.draggable {
-webkit-user-drag: none;
user-select: none;
}
```
请注意,这种方法可能会影响到元素的交互性,因此需要谨慎使用。