Touch事件分类 touchstart：当手指触摸屏幕时触发。...当两个手指触摸相同元素时，targetTouches和touches的值相同，否则targetTouches 只有一个值。 changedTouches此时只有一个值，为第二个手指的触摸点。...Touch.screenX 触点相对于屏幕左边沿的的X坐标. Touch.screenY 触点相对于屏幕上边沿的的Y坐标....，返回鼠标指针相对于文档的水平坐标 pageY 触发鼠标事件时，返回鼠标指针相对于文档的垂直坐标 screenX 触发事件时，返回鼠标指针相对于屏幕的水平坐标 screenY 触发事件时，返回鼠标指针相对于屏幕的垂直坐标...此值也可以解释为像素大小的比率：一个 CSS 像素的大小与一个物理像素的大小的比值。简单地说，这告诉浏览器应该使用多少个屏幕的实际像素来绘制单个 CSS 像素。
在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。...(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标...screenX：触摸目标在屏幕中的x坐标。 screenY：触摸目标在屏幕中的y坐标。 target：触目的DOM节点目标。...pageX/pageX/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。...radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持，好在功能不常用，欢迎大家反馈。
与x，y clientX和clientY与x，y一样的，都是客户区域坐标，指鼠标的坐标，以浏览器显示区域的左上角开始，x,y是新浏览器支持 以下截图打印的结果都是div2元素的左上顶点（从边框开始）的位置坐标...layerX,layerY layerX,layerY 往上找有定位属性的父元素的左上角（自身有定位属性的话就是相对于自身），都没有的话，就是相对于body的左上角 当元素及它的父级都没有定位属性时，以...body的左上角为原点： 当元素的父级都有定位属性时，以父级的左上角为原点： 当元素自身有定位属性时，以自身的左上角为原点： pageX， pageY pageX， pageY...相对页面左上角的距离 screenX screenY screenX screenY 相对屏幕左上角的位置 总结： clientX和clientY与x，y一样的，以浏览器显示区域的左上角开始...layerX,layerY，往上找有定位属性的父元素的左上角（自身有定位属性的话就是相对于自身），都没有的话，就是相对于body的左上角 pageX，pageY相对页面左上角的距离 screenX screenY
事件类型： DOM3级事件规定了以下几类事件；如下： UI事件： 当用户与页面上的元素交互时触发； load事件：当页面加载完后(包括所有图像，所有javascript文件，css文件等外部资源)，就会触发...mouseenter事件：在鼠标光标从元素外部移动到元素范围之内被触发；这个事件不冒泡； mousemove事件：当鼠标指针在元素内部移动时重复地触发。...的区别是：它包含页面滚动条的位置， 屏幕横坐标screenX和垂直坐标screenY属性是相对于整个屏幕的 理解鼠标滚轮事件： IE6首先实现了mousewheel事件，此后opera,chrome和safari...），-90表示向右旋转的横向模式(主屏幕按钮在左侧)， 理解移动端的事件—触摸与手势事件 有以下几个触摸事件： touchstart: 当手指触摸屏幕时触发，即使是一个手指放在屏幕上也会触发。...touchmove:当手指在屏幕上滑动时连续地触发，这个事件发生期间，我们可以使用preventDefault()事件可以阻止滚动。 touchend: 当手指从屏幕上移开时触发。
在中国从事程序开发工作的人，似乎英语并不会影响到你找到满意的工作，升职与加薪。但程序毕竟是歪果人创造的，都是由英文和数字表达式所构成的，所以掌握开发过程中常用的英语词汇还是非常重要的。...float 浮动 filter 滤镜，过滤器 font 字体 first 第一个 for 在循环语句中的一个保留字 fixed 固定的 four 4 个 function函数，功能 G: getAttribute...mouseout 从元素上移开 mousemove 移动鼠标 mousewheel 在其他浏览器的滚轮事件 mousedown 鼠标按下事件 mouseup 鼠标抬起事件 margin 外边距 millimeter...offsetWidth 获取元素自身宽度 offsetHeigh 获取元素自身高度 onload 在装载时 onclick 在点击时 ondblclick 在双击时 onmouseover 在鼠标进入时...光标相对于该屏幕的水平位置 screenY 光标相对于该屏幕的垂直位置 setAttribute 设置属性 scrollHeight 获取文档整体高度 scrollTop 获取文档滚动高度 scrollLeft
screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。 screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标。...:"+window.event.screenX+"nwindow.event.screenY:"+window.event.screenY); } event.clientX返回事件发生时...6 按右键和中间键 7 按所有的键 cancelBubble 设置或检索当前事件是否将事件句柄起泡 可能的值： false 启用起泡 true 取消该事件起泡 clientX 检索与窗口客户区域有关的鼠标光标的...clientY 检索与窗口客户区域有关的鼠标光标的Y坐标，属性为只读，没有默认值。...Element 检索在on mouseover和on mouseout事件期间退出的对象指针 keyCode 设置或检索与引发事件的关键字相关联的Unicode关键字代码 该属性与onkeydown
：用户双击手机页面的时候，浏览器会智能的缩放当前页面到原始大小。 ...移动端特有的touch事件 由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸(touch)事件。...一次完整的touch事件的触发顺序和过程 2.5 touchcancel事件 当触点由于某些原因被中断时触发。...2. screenX 触摸点相对于屏幕左边缘的 x 坐标。 3. screenY 触摸点相对于屏幕上边缘的 y 坐标。 4. clientX 触摸点相对于浏览器的 viewport左边缘的 x 坐标。...: ${touch.screenX} screenY : ${touch.screenY}
实现效果 操作说明 注意需要先把自动排列图标和将图标与网格对齐关闭，运行后可能会打乱图标排列。 空格控制开始与游戏中的跳跃。 ESC键结束程序。...实现逻辑 首先需要了解一下桌面图标的一些api，例如获取屏幕长宽，设置图标坐标这些，代码里有注释 游戏逻辑： 鸟： 给他一个速度量和重力加速度量，初始速度为0，始终受到重力加速度影响，每当按下跳跃，将速度重设为一个跳跃速度量...碰撞检测： 当鸟的坐标加一个身位会与墙发生重叠时，说明发生了碰撞，具体看代码。 因为比较懒，坠落检测之类的就没做了。需要完善的话可以自己加下。...; //获取屏幕的分辨率(宽) int screenY; //获取屏幕的分辨率(高) const int ICON_SIZE{ 80 }; //图标间隔...= GetSystemMetrics(SM_CXSCREEN); //获取屏幕的分辨率(宽) screenY = GetSystemMetrics(SM_CYSCREEN); //获取屏幕的分辨率
文档对象模型（DOM），描述处理网页内容的方法和接口。 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。...和screenY属性返回窗口相对于屏幕的X和Y坐标。...screenLeft 返回相对于屏幕窗口的x坐标 screenTop 返回相对于屏幕窗口的y坐标 screenX 返回相对于屏幕窗口的x坐标 sessionStorage 在浏览器中存储 key/value...screenY 返回相对于屏幕窗口的y坐标 self 返回对当前窗口的引用。等价于 Window 属性。 status 设置窗口状态栏的文本。 top 返回最顶层的父窗口。...getSelection() 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。 getComputedStyle() 获取指定元素的 CSS 样式。
input')[0]; input.onclick = function () { alert('你好'); }; 3.事件对象 一．事件对象 当触发某个事件时...包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息。...在非IE浏览器下，事件对象作为事件的参数，在IE下是window.event //实现跨浏览器兼容获取event对象 input.onclick = function (evt) {...可视区及屏幕坐标 clientX 可视区X坐标，距离左边框的位置 clientY 可视区Y坐标，距离上边框的位置 screenX 屏幕区X坐标，距离左屏幕的位置 screenY 屏幕区Y坐标，距离上屏幕的位置...，这就是为什 么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就 会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大 大的减少与dom的交互次数，提高性能；
：元素内容真实的宽高 scrollLeft和scrollTop：元素在滚动时超出内容区域的部分 onscroll:元素的滚动条事件，只要滚动就会触发 3.png 获取网页滚动距离 1.如何获取页面的HTML...document.documentElement.clientHeight || document.body.clientHeight || 0, } } 03-事件对象介绍（获取事件对象） 1.什么是事件对象event:当某一个事件被触发时...| window.event; console.log ( e ); } 3.1-事件对象三大坐标系 1.电脑屏幕的左上角，距离你触发事件的那一点的x值和y值 e.screenY...e.screenX 2.浏览器可视区域，距离触发事件的那一点的x值和y值 e.clientY e.clientX 3.页面的左上角（哪怕页面滚走了，还是页面左上角），距离触发事件的那一点的x值和y值...console.log("e.screenX:"+e.screenX+"---e.screenY:"+ e.screenY); //2.浏览器可视区域，距离触发事件的那一点的x值和y值
注意：IE 和 Opera 下表示的是窗口文档区到屏幕的距离，这意味着窗口最大化时，screenTop 返回的是窗口顶部栏的高度而不是 0。...兼容性：主流浏览器均支持，FireFox 浏览器在 v64 之后才支持 window.screenY/window.screenX: 返回表示窗口到屏幕距离的数字。...image.png 例如，上图中的红框是固定的屏幕可视区，而网页视为可以上下拖动的文档，当滚动条下拉的时候，实际上是文档向上拖动，而这个拖动的距离就是 element.scrollTop 2.4 返回对象系列...ev.clientX/ev.clientY： 事件发生时，鼠标点击位置相对于浏览器可视区（不包括滚动条和工具栏）左上角（该点为原点）的坐标。...ev.screenX/ev.screenY： 事件发生时，鼠标点击位置相对于设备屏幕左上角（该点为原点）的坐标 ev.offsetX/ev.offsetY： 事件发生时，鼠标点击位置相对于事件源左上角（
CSS布局相关及Flex详解，提及到使用Flex来完成一侧固定大小，另一随浏览器大小自动缩放。今天开发中，有这样一个需求，在两块内容中间增加一条线，然后拖拽线，可以自动调整两侧区域。...操作处为两个扩展屏幕，操作在右侧屏幕（左侧屏幕分辨率为1440px*900px），鼠标点击点位于可操作区域左边界2px（e.offsetX） MouseEvent MouseEvent 接口指用户与指针设备...( 如鼠标 )交互时发生的事件。...、screenY 设置或获取获取鼠标指针位置相对于用户屏幕的X、Y坐标 1440+clientX=1846 x、y clientX、clientY的别名 与clientX相等 Element Element...这个接口描述了所有相同种类的元素所普遍具有的方法和属性。 这些继承自Element并且增加了一些额外功能的接口描述了具体的行为.
因为ios设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。...在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。...下面具体说明： touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 touchmove事件：当手指在屏幕上滑动的时候连续地触发。...(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标...screenX：触摸目标在屏幕中的x坐标。 screenY：触摸目标在屏幕中的y坐标。 target：触目的DOM节点目标。
如上图：这是立方体的前面，分解为0-1-2和0-2-3二个三角形(注意三个顶点的顺序为"顺时针"方向)，当立方体的"前面"旋转到"后面"所处位置时，三角形的顶点顺序由“顺时针”改变为“逆时针”。...言外之意：如果我们能判断出某个三角形的顶点顺序为“逆时针”时，这个三角形肯定处于背面，这时应该将它隐藏或不绘制。...,pointA.screenY); g.lineTo(pointB.screenX,pointB.screenY); g.lineTo(pointC.screenX,pointC.screenY...然后光源light本身也是一个向量，向量light与向量norm会形成一个夹角θ，θ的取值范围在0~PI(即180度)之间，θ为180度时即为正面直射，θ为0度时即为背面照射(实际上小于等于90度时，已经照不到了...,pointA.screenY); g.lineTo(pointB.screenX,pointB.screenY); g.lineTo(pointC.screenX,pointC.screenY
Pixel px: CSS pixels 逻辑像素，浏览器使用的抽象单位； dt,pt: 设备无关像素； dpr: 设备像素缩放比； 公式：1px = (dpr)2 * dp 默认缩放比例： ldpi...Viewport 手机浏览器默认做了两件事 页面渲染在了一个默认的viewport; 缩放; 那么问题来了，为什么会有一个默认的viewport呢？...弹性图片：图片根据盒子百分比，改变盒子宽高即可 重新布局，显示和隐藏： 同比例缩减元素尺寸 调整页面结构布局 隐藏冗余的元素 优劣比较 优点：减少重复开发，一套代码多端兼容 劣势：在极端情况下影响页面性能...触摸事件 事件 触发情况 备注 touchstart 手指触摸屏幕触发 已有手指放在屏幕上则不触发 touchmove 手指在屏幕上滑动 连续触发 touchend 手指离开屏幕时触发 / touchcancel...：触摸目标在屏幕中的横坐标 screenY：触摸目标在屏幕中的纵坐标 target：触摸的DOM节点的目标 d.
history对象 forward() / back() / go() location对象 navigator对象 screen对象 DOM DOM树 访问元素 getElementById...querySelectorAll() parentNode / previousSibling / nextSibling / children / firstChild / lastChild 操作元素...focus / blur 表单事件：input / change / submit / reset / cut / copy / paste / select 事件绑定 HTML事件处理程序（不推荐使用...，因为要做到标签与代码分离） 传统的DOM事件处理程序（只能附加一个回调函数） 事件监听器（旧的浏览器中不被支持） 事件流：事件捕获 / 事件冒泡 事件对象（低版本IE中的window.event）...- 事件发生的位置 屏幕位置：screenX和screenY 页面位置：pageX和pageY 客户端位置：clientX和clientY 键盘事件 - 哪个键被按下了 keyCode
(HTMLElement) 判断指定元素与当前是否相同，具有相同的class，相同的属性，相同的子元素 isSameNode(HTMLElement) 判断是否是同一个元素 removeChild(HTMLElement...鼠标事件 click 单击，释放时触发 dblclick 双击，释放时触发 mousedown 点击鼠标键时触发 mouseenter 在光标移入元素或某个后代元素所占据的屏幕区域时触发 mouseleave...在光标移出元素及所有后代元素所占据的屏幕区域时触发 mousemove 光标在元素上移动时触发 mouseout 与mouseleave基本相同，除了当光标仍然在某个后代元素上时也会触发 mouseenter...与mouseenter基本相同，除了当光标仍然在某个后代元素上时也会触发 mouseup 当释放鼠标时触发 鼠标事件被触发时，指定的处理方法都会传入一个 MouseEvent 对象，该对象携带一些额外的属性和方法供处理...事件触发时鼠标相对于元素视口的Y坐标 screenX 事件触发时鼠标相对于屏幕坐标系的X坐标 screenY 事件触发时鼠标相对于屏幕坐标系的Y坐标 shiftKey 事件触发时是否有点击shift键
预备知识：移动端点击一个元素触发事件的顺序 以下是四种touch和click事件 touchstart: //手指放到屏幕上时触发 touchmove: //手指在屏幕上滑动式触发...touchend: //手指离开屏幕时触发 touchcancel: //系统取消touch事件的时候触发，这个好像比较少用 click：//在这个dom（或冒泡到这个dom）上手指触摸开始...，且手指未曾在屏幕上移动（某些浏览器允许移动一个非常小的位移值），且在这个在这个dom上手指离开屏幕，且触摸和离开屏幕之间的间隔时间较短（某些浏览器不检测间隔时间，也会触发click）才能触发 上述事件发生顺序...双击缩放：顾名思义，即用手指在屏幕上快速点击两次，移动端浏览器会将网页缩放至原始比例。 那么这和 300 毫秒延迟有什么联系呢？ 假定这么一个场景。用户在 浏览器里边点击了一个链接。...因此，浏览器就等待 300 毫秒，以判断用户是否再次点击了屏幕。 也就是说，移动端浏览器会有一些默认的行为，比如双击缩放、双击滚动。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
