关于拖动事件与点击事件冲突拖拽完触发了点击事件

  directives: {
    drag: {
      // 指令的定义  避免在边边挡住其他元素 添加一个自定义拖拽
      bind: function(el) {
        const oDiv = el; // 获取当前元素
        el.style.pointerEvents = null
        oDiv.onmousedown = (e) => {
          const disX = e.clientX - oDiv.offsetLeft;
          const disY = e.clientY - oDiv.offsetTop;
          document.onmousemove = (e) => {
            el.style.pointerEvents = 'none'
            const left = e.clientX - disX;
            const top = e.clientY - disY;
            oDiv.style.left = left + 'px';
            oDiv.style.top = top + 'px';
          };
          document.onmouseup = (e) => {
            el.style.pointerEvents = null
            document.onmousemove = null;
            document.onmouseup = null;
          }
        }
      }
    }
  },
### 解决 Vue-drag-resize 组件中点击事件拖拽事件冲突 对于 `vue-drag-resize` 组件中的点击事件拖拽事件冲突问题,可以通过利用组件提供的特定钩子来处理。具体来说,在拖拽操作结束后触发相应的逻辑更为合适。 #### 使用 `@dragstop` 钩子替代直接绑定点击事件 当尝试通过常规方式如 `@click.stop` 或者其他变通方法无法有效阻止事件冒泡时,推荐采用 `vue-drag-resize` 提供的内置解决方案——监听 `@dragstop` 事件[^2]。此事件会在元素成一次整的拖动之后被触发,从而允许开发者在此时机执行预期的操作而不会受到正在进行中的拖拽动作干扰。 ```html <template> <div> <!-- 使用 @dragstop 来代替 click --> <vue-drag-resize @dragstop="handleDragStop"></vue-drag-resize> </div> </template> <script> export default { methods: { handleDragStop() { console.log('Element has been dragged and stopped.'); // 执行原本打算在点击时发生的业务逻辑 } } } </script> ``` 这种方法不仅能够绕过两者间的潜在竞争关系,而且保持了代码清晰度以及维护性。此外,如果确实需要响应真正的鼠标单击行为而非仅限于拖放后的状态,则可以在模板内部添加额外判断条件或者借助第三方库辅助实现更复杂的交互模式。 #### 动态调整位置参数以适应不同设备 值得注意的是,除了上述解决办法外,还可以考虑优化布局设置使得用户体验更加流畅自然。例如,通过动态计算并传递给 `<vue-drag-resize>` 的 `:x` `:y` 属性值,可以根据当前视口尺寸自动调整可移动区域的位置,进而提高移动端及其他低分辨率屏幕上的可用性。 ```javascript computed: { customX() { return window.innerWidth * someRatio; }, customY() { return window.innerHeight * anotherRatio; } }, mounted() { this.updatePosition(); window.addEventListener('resize', this.updatePosition); }, methods: { updatePosition() { // 更新 position based on new screen size... } } ``` 综上所述,针对 `vue-drag-resize` 中存在的点击拖拽事件冲突现象,最有效的策略是充分利用框架本身所提供的特性,并适当结合应用层面的需求来进行定制化开发。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值