移动端调试 ​

调试工具 ​

1. 通过 eruda 调试工具，可以在移动端调试页面，在 head 标签中引入 eruda 脚本，然后在 body 标签中初始化 eruda 即可

<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>
eruda.init();
console.log('控制台打印信息');
</script>

2. 通过 vConsole 调试工具，可以在移动端调试页面，在 head 标签中引入 vConsole 脚本，然后在 body 标签中初始化 vConsole 即可

3. 通过 chrome://inspect/#devices, 然后 inspect 进入调试

可能需要先安装 `android studio`

在网页中可以，通过右键为页面创建二维码，来扫码登录

移动端 触摸事件和 mousedown、mouseup、click 事件之间的关系 ​

一、移动端 触摸事件

ontouchstart、ontouchmove、ontouchend、ontouchcancel

1、Touch事件简介

pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如iphone、ipod Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel事件，分别对应了触屏开始、拖拽及完成触屏事件和取消。

2、Touch事件与Mouse事件的出发关系

二、mousedown、mouseup、click事件之间的关系

点击select标签元素的时候，会弹出下拉。然而当option中没有元素时，就不希望弹出下拉（比如在某些浏览器中，点击select会默认出一个罩层效果，而此时没有数据选择的话，弹出比较不友好）。

首先想到是利用click事件控制，发现仍然会有下拉出现...实际这个是mousedown事件控制的。

这里就说明下click和mousedown、mouseup。规范要求，

这句话也很好理解，有时候我们在浏览网页时，鼠标在一个按钮或者链接上按下了，但是突然却又改了主意，此时我们一般会移开鼠标，在另一个空白处松开鼠标哈哈~相信这个大家经常上网都有经验。实际这个就利用了click事件要求在同一个元素相继触发mousedown 和 mouseup 事件。

移动端 触摸事件和 mousedown、mouseup、click 事件之间的关系

解决办法：

使用指针事件处理多端设备“定点”输入问题

Pointer events 指针事件

onKeyDown 事件 ​

对于 onKeyDown 事件，在安卓手机上，拿到的 keyCode 是 229，key 为 Unidentified

W3C 规定，对于mobile/virtual keyboards，keyCode 应该是 229，key 应该是 "Unidentified"，可能对于 ios 有适配，但是 安卓 不行

When using virtual/mobile keyboards, formally known as IME (Input-Method Editor), the W3C standard states that a KeyboardEvent’s e.keyCode should be 229 and e.key should be "Unidentified".