监听鼠标事件

鼠标事件

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">