鼠标事件

MouseEvent接口指用户与指针设备(如鼠标)交互时发生的事件。

  • mousedown在元素上按下任意鼠标按键。
  • mouseup在元素上释放任意鼠标按键。
  • mousemove指针在元素内移动时持续触发。
  • click在元素上按下并释放任意鼠标按键。
监听鼠标事件
div.onmousedown = function(x){
        console.log(x)
    }
复制代码
属性
  • clientX当前坐标系下鼠标指针的X轴。
  • clientY当前坐标系下鼠标指针的Y轴。
  • button点击事件对应的按键序号：0为左键、1为中键、2为右键。

触摸事件

touchEvent是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。

触摸事件的类型
  • touchstart当用户在触摸平面上放置了一个触点时触发。
  • touchmove当用户在触摸平面上移动触点时触发。
  • touchend当一个触点被用户从触摸平面上移除（当用户将一个手指离开触摸平面）时触发。
监听touch事件
div.ontouchstart = function(x){
        console.log(x)
    }
复制代码
属性
  • touches(多点触控): 一 个TouchList对象，包含了所有当前接触触摸平面的触点的 Touch 对象，无论它们的起始于哪个 element 上，也无论它们状态是否发生了变化
  • touchlist: 一个 TouchList 代表一个触摸平面上所有触点的列表; 举例来讲, 如果一个用户用三根手指接触屏幕(或者触控板), 与之相关的TouchList 对于每根手指都会生成一个 Touch 对象, 共计三个
如何检测网页运行在电脑上还是手机

in运算符 : 如果指定的属性在指定的对象或其原型链中，则in运算符返回true

var hash = {a:1,b:2,c:3}
    'a' in hash  // 返回true
    'b' in hash  // 返回true
    'd' in hash  // 返回false
复制代码

我们可以利用in操作符来判断电脑还是手机

'ontouchstart' in document.body  // 如果在手机上则返回true,在电脑上则返回false
    // 换一种方式
    document.body.ontouchstart === undefined // 如果在手机上返回true,在电脑则返回false
复制代码

这种检测方式叫做特性检测，检测的是特性不是设备

viewport由于移动端的手机默认会缩放，所以我们需要加上一个viewport的mata标签使它不缩放，以一比一的比例显示我的页面内容。完整代码：<meta name="viewport" content="width=device-width, initial-scale=1.0">