现在有两个块,结构如下:
<div id = "outer" style = "width:50px;height:50px;">
<span id = "inner" style = "positon:absolute;buttom:0;right:0;width:5px;height:5px;">
</span>
</div>
如图:
https://mjj.today/i/TXCM5H
这两个块都监听了mousedown,mousemove,mouseup。
点击 outer 可以移动整个块，点击 inner 拖动可以控制 outer 块的宽高。
如果我拖拽 inner 的话,outer 会在增加宽高的同时移动。
增加一个状态控制 outer 不进行处理，但是无法实现两个功能同时存在。
这种情况有什么好的处理办法吗？用的原生的 js 。
 |
1
johnnyNg Jun 17, 2024
mouse 事件里面有 eventtarget 吧，判断一下 target 是 outer 还是 inner
|
|
2
johnnyNg Jun 17, 2024
还有一种方案，在各个事件里面阻止一下事件冒泡
|
 |
3
youngPacce OP @johnnyNg 尝试过，但是 target 在移动的过程中貌似会冒泡传递出去，导致这个 target 最终不准确，还是用不了。我倒是没尝试过阻止事件冒泡，我去了解一下。
|
 |
4
zhtyytg Jun 17, 2024
肯定要阻止事件冒泡的，前端常识
|
 |
5
yanyiming Jun 17, 2024 via Android
在 inner 的事件处理器中给事件对象增加一个属性，比如 fromInner: true ，因为事件对象是会传递到 outer 的，所以 outer 也能获取这个属性值。然后根据属性值判断逻辑即可。
|
|
6
youngPacce OP @yanyiming j 具体怎么处理呢？ e.target 还是 e.frominner? 另外我的 mousemove 和 mouseup 都是加在 ducoment 上的，似乎到了 mousemove 再判断 target 就不太好使了。
|
|
7
youngPacce OP 解决了，这里说一下我的解决方案，
我是在 mousedown 之后才添加 mousemove,mouseup 事件。 mouseup 之后就会移除掉 mousemove mouseup 事件。 只需要在 inner 触发 mousedown 的时候阻止冒泡就行了。 |
Select Language