JS中鼠标左右键以及中键的事件

在JavaScript中，鼠标事件有以下三种：

1. click：鼠标点击事件，包括左键、中键和右键的单击事件。

2. contextmenu：鼠标右键菜单事件。

3. mousedown/mouseup：鼠标按下和松开事件，包括左键、中键和右键的按下和松开事件。

可以通过事件对象的button属性来判断鼠标按下的是哪个键，取值如下：

- 0：左键
- 1：中键
- 2：右键

例如，可以通过以下代码监听鼠标左键单击事件：

document.addEventListener('click', function(event) {
  if (event.button === 0) {
    console.log('左键单击');
  }
});

同样地，可以监听鼠标右键菜单事件：

document.addEventListener('contextmenu', function(event) {
  console.log('右键菜单');
  event.preventDefault(); // 阻止默认菜单弹出
});

还可以监听鼠标中键单击事件：

document.addEventListener('mousedown', function(event) {
  if (event.button === 1) {
    console.log('中键单击');
  }
});

相关问题

echarts实现鼠标左右键拖动

Echarts 提供了图表实例的 `setOption` 方法中可以配置事件处理函数，通过监听鼠标事件实现拖动功能。

具体实现方法如下：

1. 创建一个全局变量 `mousedown`，用于标记鼠标左键是否按下，初始值为 `false`。

2. 在 `option` 中配置 `grid` 的 `containLabel` 属性为 `true`，表示网格区域包含坐标轴标签。

3. 在 `option` 中配置 `dataZoom` 组件，设置 `type` 为 `'inside'`，表示内置的数据区域缩放组件。

4. 在 `option` 中配置 `toolbox` 工具箱组件，设置 `feature` 属性中的 `dataZoom` 为 `{}`，表示数据区域缩放工具。

5. 在 `option` 中配置 `series` 的 `itemStyle` 属性的 `normal` 属性中，设置 `opacity` 属性为 `0.8`，表示图表项的透明度。

6. 在 `option` 中配置 `series` 的 `label` 属性的 `normal` 属性中，设置 `show` 属性为 `true`，表示显示图表项的标签。

7. 在 `option` 中配置 `series` 的 `emphasis` 属性的 `label` 属性中，设置 `show` 属性为 `false`，表示不显示图表项的标签。

8. 在 `option` 中配置 `series` 的 `itemStyle` 属性的 `emphasis` 属性中，设置 `opacity` 属性为 `1`，表示图表项的透明度。

9. 在 `option` 中配置 `series` 的 `markPoint` 属性，用于标记拖动区域的起始点和结束点。

10. 在 `option` 中配置 `tooltip` 组件，设置 `triggerOn` 属性为 `'mousemove'`，表示鼠标移动时触发提示框。

11. 在 `option` 中配置 `brush` 组件，用于选择图表项或拖动区域。

12. 在 `option` 中配置 `brush` 组件的 `toolbox` 属性，表示在工具箱中显示选择和清除按钮。

13. 在 `option` 中配置 `brush` 组件的 `brushLink` 属性，表示与数据区域缩放组件联动。

14. 在 `option` 中配置 `brush` 组件的 `seriesIndex` 属性，表示选择或拖动的系列索引。

15. 在 `option` 中配置 `brush` 组件的 `throttleType` 属性为 `'debounce'`，表示拖动过程中节流处理。

16. 通过监听 `mousedown`、`mousemove` 和 `mouseup` 事件实现鼠标左右键的拖动功能。

具体代码实现如下：

var myChart = echarts.init(document.getElementById('myChart'));

var mousedown = false; // 鼠标左键是否按下
var start, end; // 拖动区域的起始点和结束点

myChart.setOption({
  grid: {
    containLabel: true
  },
  dataZoom: {
    type: 'inside'
  },
  toolbox: {
    feature: {
      dataZoom: {}
    }
  },
  series: [{
    type: 'scatter',
    data: [
      [10.0, 8.04],
      [8.0, 6.95],
      [13.0, 7.58],
      [9.0, 8.81],
      [11.0, 8.33],
      [14.0, 9.96],
      [6.0, 7.24],
      [4.0, 4.26],
      [12.0, 10.84],
      [7.0, 4.82],
      [5.0, 5.68]
    ],
    itemStyle: {
      normal: {
        opacity: 0.8
      },
      emphasis: {
        opacity: 1
      }
    },
    label: {
      normal: {
        show: true
      },
      emphasis: {
        show: false
      }
    },
    markPoint: {
      symbolSize: 50,
      label: {
        formatter: function(params) {
          var x = params.value[0];
          var y = params.value[1];
          return '(' + x.toFixed(2) + ', ' + y.toFixed(2) + ')';
        }
      },
      data: [{
        name: '起始点',
        coord: [0, 0]
      }, {
        name: '结束点',
        coord: [0, 0]
      }]
    }
  }],
  tooltip: {
    triggerOn: 'mousemove'
  },
  brush: {
    toolbox: ['rect', 'polygon', 'lineX', 'lineY', 'keep', 'clear'],
    brushLink: 'all',
    seriesIndex: 0,
    throttleType: 'debounce'
  }
});

myChart.on('mousedown', function(params) {
  if (params.event.which === 1) { // 鼠标左键按下
    mousedown = true;
    start = [params.event.offsetX, params.event.offsetY];
    end = [params.event.offsetX, params.event.offsetY];
    myChart.setOption({
      series: [{
        markPoint: {
          data: [{
            name: '起始点',
            coord: myChart.convertFromPixel('grid', start)
          }, {
            name: '结束点',
            coord: myChart.convertFromPixel('grid', end)
          }]
        }
      }]
    });
  } else if (params.event.which === 3) { // 鼠标右键按下
    mousedown = false;
  }
});

myChart.on('mousemove', function(params) {
  if (mousedown) { // 鼠标左键按下
    end = [params.event.offsetX, params.event.offsetY];
    myChart.setOption({
      series: [{
        markPoint: {
          data: [{
            name: '起始点',
            coord: myChart.convertFromPixel('grid', start)
          }, {
            name: '结束点',
            coord: myChart.convertFromPixel('grid', end)
          }]
        }
      }]
    });
  }
});

myChart.on('mouseup', function(params) {
  if (params.event.which === 1) { // 鼠标左键释放
    mousedown = false;
    end = [params.event.offsetX, params.event.offsetY];
    myChart.dispatchAction({
      type: 'brush',
      areas: [{
        brushType: 'rect',
        coordRange: [
          myChart.convertFromPixel('grid', start),
          myChart.convertFromPixel('grid', end)
        ]
      }]
    });
    myChart.setOption({
      series: [{
        markPoint: {
          data: [{
            name: '起始点',
            coord: [0, 0]
          }, {
            name: '结束点',
            coord: [0, 0]
          }]
        }
      }]
    });
  }
});

上述代码实现了鼠标左键拖动选择区域，在选择区域内可以拖动鼠标右键进行平移，也可以使用内置的数据区域缩放组件或工具箱中的数据区域缩放工具进行缩放。

lightingchart如何设置键盘左右按键游标左右动

如果您正在使用 LightningChart JS 库来创建图表，并且想要在键盘上设置游标的左右移动，可以按照以下步骤进行操作：

1. 获取图表对象并为其添加事件监听器：

const chart = lightningChart().ChartXY()
chart.onMouseMove((_, event) => {
  // 处理鼠标移动事件
})
chart.onKeyDown((_, event) => {
  // 处理按键事件
})

2. 在 `onMouseMove` 事件中处理图表上的鼠标移动事件，您可以使用 `chart.getMousePosition()` 方法获取当前鼠标位置，并将其传递给游标对象的 `setPosition` 方法，以更新游标位置：

const cursor = chart.addCursor()
chart.onMouseMove((_, event) => {
  const mousePos = chart.engine.clientLocation2Engine(event.clientX, event.clientY)
  cursor.setPosition(mousePos)
})

3. 在 `onKeyDown` 事件中处理键盘按键事件。您可以使用 `event.keyCode` 属性获取当前按下的按键代码，然后根据按键代码来调整游标位置：

chart.onKeyDown((_, event) => {
  const keyCode = event.keyCode
  const cursorPos = cursor.getPosition()
  if (keyCode === 37) { // 左箭头
    cursorPos.x -= 10
  } else if (keyCode === 39) { // 右箭头
    cursorPos.x += 10
  }
  cursor.setPosition(cursorPos)
})

在上面的示例中，我们检查按下的按键代码是否为左箭头或右箭头，并根据需要将游标位置向左或向右移动。