# 输入 `vjmap3d`引擎中提供了基本的输入系统，可以统一处理鼠标与触屏的操作输入。 ## 常用的输入事件名 |事件名|信号名|描述| |:---|:---|:---| |mouseup|onMouseUp|鼠标抬起| |mousemove|onMouseMove|鼠标移动| |mousedown|onMouseDown|鼠标按下| |preclick|onMousePreClick|单击(click)事件触发之前| |click|onMouseClick|鼠标单击| |dblclick|onMouseDblClick|鼠标双击| |mouseover|onMouseOver|鼠标指针穿过被选元素或其子元素，均会触发事件| |mouseout|onMouseOut|鼠标指针离开被选元素或其子元素则触发事件| |mouseenter|onMouseEnter|鼠标指针穿过被选元素时才触发事件| |mouseleave|onMouseLeave|鼠标指针离开被选元素时才触发事件| |contextmenu|onContextMenu|上下文菜单事件| |pointerdown|onPointerDown|指针按下(PC和移动端)| |pointermove|onPointerMove|指针移动(PC和移动端)| |pointerup|onPointerUp|指针抬起(PC和移动端)| |pointerdownup|onPointerDownUp|指针直接按下松开，没有拖动| |pointercancel|onPointerCancel|指针取消| |mousewheel|onMouseWheel|鼠标滚轮| |keydown|onKeyDown|键盘按下| |keyup|onKeyUp|键盘抬起| > `app.on("click")` 与 `app.signal.onMouseClick.add(...)` 双通道同发 ✓；`pointerdownup` 仅"按下松开无拖动"触发，拖动不触发 ✓；右键 `mousedown+mouseup`（button=2）由 `pointerdownup` 推导派发 `contextmenu` ✓；`app.Input.x()/y()/getKeyPressed("ShiftLeft")` 可用。注意 `Input.isLeftButtonDown` 等按键态读的是 **pointer 事件通道**——合成 `MouseEvent("mousedown")` 不翻转其状态，测试须派发 `PointerEvent`。 示例： 响应点击事件，弹出信息 下面两种写法效果一样 使用信号写法 ```js app.signal.onMouseClick.add(e => app.logInfo("您点击了下!", "success" , 1000)) ``` 监听事件写法 ```js app.on("click", e => app.logInfo("您点击了下!", "success" , 1000)) ``` 
let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
    container: "map", // 容器id
    // 渲染参数
    scene: {
        gridHelper: { visible: true } // 是否显示坐标网格
    },
    camera: {  // 相机设置
        viewHelper: { enable: true } // 是否显示视角指示器
    }
})
app.on("click", e => app.logInfo("您点击了下!", "success" , 1000))
//
//app.signal.onMouseClick.add(e => app.logInfo("您点击了下!", "success" , 1000))
## 获取当前输入状态 通过 App 的 [Input](https://vjmap.com/map3d/api/classes/App.html#Input) 获取当前输入状态 ```js let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken); let app = new vjmap3d.App(svc, { container: "map", // 容器id stat: { show: true, left: "0" }, scene: { gridHelper: { visible: true } // 是否显示坐标网格 }, camera: { // 相机设置 viewHelper: { enable: true, position: "leftBottom" } // 是否显示视角指示器 } }) let cfg = [ { type: 'checkbox', label: '允许输入', getValue: ()=> app.Input.enabled(), setValue: v => app.Input.setEnable(v) }, { type: 'number', label: '当前鼠标X', getValue: () => app.Input.x(), readOnly: true }, { type: 'number', label: '当前鼠标Y', getValue: () => app.Input.y(), readOnly: true }, { type: 'number', label: '当前鼠标移动X', getValue: () => app.Input.movementX(), readOnly: true }, { type: 'number', label: '当前鼠标移动Y', getValue: () => app.Input.movementY(), readOnly: true }, { type: 'checkbox', label: '鼠标移动', getValue: () => app.Input.isMoving(), readOnly: true }, { type: 'checkbox', label: '鼠标拖动', getValue: () => app.Input.isDragging(), readOnly: true }, { type: 'checkbox', label: '左键按下', getValue: () => app.Input.isLeftButtonDown(), readOnly: true }, { type: 'checkbox', label: '左键按住', getValue: () => app.Input.isLeftButtonPressed(), readOnly: true }, { type: 'checkbox', label: '左键抬起', getValue: () => app.Input.isLeftButtonUp(), readOnly: true }, { type: 'checkbox', label: '中键按下', getValue: () => app.Input.isMidButtonDown(), readOnly: true }, { type: 'checkbox', label: '中键按住', getValue: () => app.Input.isMidButtonPressed(), readOnly: true }, { type: 'checkbox', label: '中键抬起', getValue: () => app.Input.isMidButtonUp(), readOnly: true }, { type: 'checkbox', label: '右键按下', getValue: () => app.Input.isRightButtonDown(), readOnly: true }, { type: 'checkbox', label: '右键按住', getValue: () => app.Input.isRightButtonPressed(), readOnly: true }, { type: 'checkbox', label: '右键抬起', getValue: () => app.Input.isRightButtonUp(), readOnly: true }, { type: 'checkbox', label: '按住Shift键', getValue: () => !!(app.Input.getKeyPressed("ShiftLeft") || app.Input.getKeyPressed("ShiftRight")), readOnly: true }, { type: 'checkbox', label: '按住Ctrl键', getValue: () => !!(app.Input.getKeyPressed("ControlLeft") || app.Input.getKeyPressed("ControlRight")), readOnly: true }, { type: 'checkbox', label: '按住Alt键', getValue: () => !!(app.Input.getKeyPressed("AltLeft") || app.Input.getKeyPressed("AltRight")), readOnly: true } ] const ui = await app.getConfigPane({ title: "输入参数", style: { width: "250px"}}); cfg.forEach(c => ui.appendChild(c)); ``` 
let svc = new vjmap3d.Service(env.serviceUrl, env.accessToken);
let app = new vjmap3d.App(svc, {
    container: "map", // 容器id
    stat: { show: true, left: "0" },
    scene: {
        gridHelper: { visible: true } // 是否显示坐标网格
    },
    camera: {  // 相机设置
        viewHelper: { enable: true, position: "leftBottom" } // 是否显示视角指示器
    }
})
let cfg = [
    {
        type: 'checkbox',
        label: '允许输入',
        getValue: ()=> app.Input.enabled(),
        setValue: v => app.Input.setEnable(v)
    },
    {
        type: 'number',
        label: '当前鼠标X',
        getValue: () => app.Input.x(),
        readOnly: true
    },
    {
        type: 'number',
        label: '当前鼠标Y',
        getValue: () => app.Input.y(),
        readOnly: true
    },
    {
        type: 'number',
        label: '当前鼠标移动X',
        getValue: () => app.Input.movementX(),
        readOnly: true
    },
    {
        type: 'number',
        label: '当前鼠标移动Y',
        getValue: () => app.Input.movementY(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '鼠标移动',
        getValue: () => app.Input.isMoving(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '鼠标拖动',
        getValue: () => app.Input.isDragging(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '左键按下',
        getValue: () => app.Input.isLeftButtonDown(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '左键按住',
        getValue: () => app.Input.isLeftButtonPressed(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '左键抬起',
        getValue: () => app.Input.isLeftButtonUp(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '中键按下',
        getValue: () => app.Input.isMidButtonDown(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '中键按住',
        getValue: () => app.Input.isMidButtonPressed(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '中键抬起',
        getValue: () => app.Input.isMidButtonUp(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '右键按下',
        getValue: () => app.Input.isRightButtonDown(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '右键按住',
        getValue: () => app.Input.isRightButtonPressed(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '右键抬起',
        getValue: () => app.Input.isRightButtonUp(),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '按住Shift键',
        getValue: () => !!(app.Input.getKeyPressed("ShiftLeft") || app.Input.getKeyPressed("ShiftRight")),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '按住Ctrl键',
        getValue: () => !!(app.Input.getKeyPressed("ControlLeft") || app.Input.getKeyPressed("ControlRight")),
        readOnly: true
    },
    {
        type: 'checkbox',
        label: '按住Alt键',
        getValue: () => !!(app.Input.getKeyPressed("AltLeft") || app.Input.getKeyPressed("AltRight")),
        readOnly: true
    }
]
const ui = await app.getConfigPane({ title: "输入参数", style: { width: "250px"}});
cfg.forEach(c => ui.appendChild(c));