【原生js添加鼠标事件的兼容性写法】的更多相关文章

原生js添加鼠标事件的兼容性写法

兼容pc和移动端,还兼容了surface平板. surface平板特别坑,既可以用鼠标也能用触摸屏,也就是说同时有touch事件和mouse事件. function addEvent(_target,eventType,fnHandler,useCapture){ useCapture==undefined?useCapture=true:""; var touchable,isSurface,msPointerable; try{ msPointerable = window.nav…

原生js获取鼠标坐标方法全面讲解-zmq

原生js获取鼠标坐标方法全面讲解:clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y 一.关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种:event.clientX/Yevent.pageX/Yevent.offsetX/Yevent.layerX/Yevent.screenX/Y 二.分别讲解如下: clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 page…

原生js添加和删除类

原生js添加和删除类: this.className +=" "; this.className = this.className.replace(" 原来的类","替换后的类");…

原生js添加博客点击鼠标出小心心效果~~

昨天刚申请成功JS权限,心血来潮想添加点东西,记得之前看到别人家博客首页点击鼠标的时候会出现炫酷的 “小心心”,自己也来搞一个.没有用jquery啥的框架,原生js写起来麻烦了点,不过主要是怕博客首页加载不进去jquery所以先这么着试试,意料之中没有问题. 毕竟刚开始给自己博客添加JS才疏学浅,有更好的方法添加更炫酷的动态效果可以分享给我呀.有大神给指点指点那就更多谢啦.欢迎指正错误~ 效果如下: 话不多说了,先添加css代码,主要是用来画“小心心”的: body {position: rel…

原生js自动触发事件

熟悉jquery的童鞋都知道在jq中有一个方法可以自动触发事件,那就是trigger(),那么通过原生js又怎么模拟触发呢? js中添加一个主动触发事件的方法有dispatch.该方法能模拟用户行为,如点击(click)操作等. 标准使用dispatchEvent方法,IE6/7/8则使用fireEvent方法. dispatchEvent() 方法给节点分派一个合成事件. 语法如下: dispatchEvent(eventObj) eventObj 参数是一个描述事件的 ActionScrip…

原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y【转】

关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变 兼容性:除IE6/7/8不支持外,其余浏览器均支持 off…

基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转

基于css3新属性transform,实现3d立方体的旋转 通过原生JS,点击事件,鼠标按下.鼠标抬起和鼠标移动事件,实现3d立方体的拖动旋转,并将旋转角度实时的反应至界面上显示 实现原理:通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标,来获得鼠标在X轴.Y轴移动的距离,将距离实时赋值给transform属性 从而通过改变transform:rotate属性值来达到3d立方体旋转的效果 HTML代码块: <body> <input type="button" clas…

原生JS添加节点方法与jQuery添加节点方法的比较及总结

一.首先构建一个简单布局,来供下边讲解使用 1.HTML部分代码: <div id="div1">div1</div> <div id="div2">div2 <span id="span1">span1</span> <span id="span2">span2</span> </div> <div id="div…

61.H5---利用canvas+原生js进行鼠标跟随绘图

<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&g…

原生js获取鼠标坐标方法全面讲解：clientX/Y,pageX/Y,offsetX/Y,layerX/Y,screenX/Y

关于js鼠标事件综合各大浏览器能获取到坐标的属性总共以下五种 event.clientX/Y event.pageX/Y event.offsetX/Y event.layerX/Y event.screenX/Y clientX/Y: clientX/Y获取到的是触发点相对浏览器可视区域左上角距离,不随页面滚动而改变 兼容性:所有浏览器均支持 pageX/Y: pageX/Y获取到的是触发点相对文档区域左上角距离,会随着页面滚动而改变 设置<body  style="width:2000…