鼠标事件容器
| 属性名 | 类型 | 默认值 | 描述 |
| onMouseover |
EventHandle |
|
鼠标移入目标元素上方。鼠标移到其后代元素上时会触发。 |
| onMouseout | EventHandle |
|
鼠标移出目标元素上方。 |
| onMouseenter | EventHandle |
|
鼠标移入元素范围内触发，该事件不冒泡，即鼠标移到其后代元素上时不会触发。 |
| onMouseleave | EventHandle |
|
鼠标移出元素范围时触发，该事件不冒泡，即鼠标移到其后代元素时不会触发。 |
| onMouseup | EventHandle |
|
鼠标按钮被释放弹起时触发。 |
| onMousedown | EventHandle |
|
鼠标按钮被按下时触发。 |
| onMousemove | EventHandle |
|
鼠标在元素内部移动时不断触发。 |
onMouseup、onMousedown、onMousemove均可获取 event.detail.x，event.detail.y 坐标值
onMouseup、onMousedown可获取 event.detail.button
<view>
<view class="com-wrap" style="padding-bottom: 100px">
<mouseable-view
class="one"
onMouseover="common"
onMouseout="common"
onMouseenter="common"
onMouseleave="common"
onMouseup="handleMouseUp"
onMousemove="handleMouseMove" >
<mouseable-view
class="two"
style="left:{{ x }}px;top:{{ y }}px;"
onMouseover="common2"
onMouseout="common2"
onMouseenter="common2"
onMouseleave="common2"
onMousedown="handleDown">
</mouseable-view>
</mouseable-view>
</view>
</view>
Component({
mixins: [],
data: {
isPC: false,
x: 0,
y: 0,
},
props: {},
didMount() {
this.actFinall = {
x: this.data.x,
y: this.data.y
};
},
didUpdate() {},
didUnmount() {},
methods: {
common(e) {// console.log('mouse event', e.type); },
common2(e) { // console.log('mouse event2', e.type); },
handleDown(e) {
console.log('e:', e.type, e.detail);
this.act = true;
let { x, y } = e.detail;
this.actNum = { x, y };
},
handleMouseMove(e) {
if (!this.act) return;
console.log('e:', e.type, e.detail, this.actNum);
const { x: currentX, y: currentY } = e.detail;
const { x, y } = this.actNum;
this.setData({
x: this.actFinall.x + currentX - x,
y: this.actFinall.y + currentY - y
});
console.log(this.data);
},
handleMouseUp(e) {
console.log('e:', e.type, e.detail);
this.actFinall = { x: this.data.x, y: this.data.y };
this.act = false;
},
},
});
.one {
height: 300px;
width: 500px;
background-color: darkorange;
position: relative;
}
.two {
left: 0;
top: 0;
height: 100px;
width: 100px;
position: absolute;
background-color: cadetblue;
}
