# PC上不能通过鼠标控制图片滑动

#### 问题现象

PC上的应用，不能通过鼠标控制图片滑动。

#### 背景知识

*   PanGesture：滑动手势事件。当滑动的最小距离达到设定的最小值时触发滑动手势事件。
*   Swiper：滑块视图容器，提供子组件滑动轮播显示的能力。
*   鼠标事件：在鼠标的单个动作触发多个事件时，事件的顺序是固定的，鼠标事件默认透传。

#### 问题定位

1.  检查容器是否绑定滑动手势事件。如PanGesture事件。
    
    ```
     Column() {
      Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY)
    }
    .translate({ x: this.offsetX, y: this.offsetY, z: 0 }) // 以组件左上角为坐标原点进行移动
    // 左右滑动触发该手势事件
    .gesture(
      PanGesture(this.panOption)
        .onActionStart((event: GestureEvent) => {
          console.info(`Pan start`);
          console.info(`Pan start timeStamp is: ${event.timestamp}`);
        })
    )
    ```
    
2.  确保父容器未阻拦鼠标事件。如父组件设置了hitTestBehavior(HitTestMode.BLOCK\_DESCENDANTS)则会阻塞子节点响应触摸测试。

#### 分析结论

1.  组件未声明支持鼠标拖拽事件。
2.  父容器阻拦了鼠标事件。

#### 修改建议

1.  组件未声明支持鼠标拖拽事件：
    *   组件绑定PanGesture事件实现左右滑动。参考示例。
    *   如果是Swiper组件，将disableSwipe设为false。因为Swiper组件内包含了PanGesture拖动手势事件，用于滑动轮播子组件。disableSwipe属性设为true会取消内部的PanGesture事件监听。

2.  建议启用鼠标事件传递（参考：如何实现事件透传）。