1.隔离click事件

有一些应用，不需要我们自己的定义的click函数，例如：

  1.      $(document).on('click', '#inp', function(e){
  2.          alert('hello world!');
  3.      });

希望点击id="inp"时，不予以响应，那怎么办！！看代码：

  1. document.addEventListener('click',touch, true);
  2. function touch (event){
  3.     switch(event.type){
  4.        case "click":
  5.        event.preventDefault();
  6.        event.stopPropagation();
  7.     }
  8.     break;
  9. }

2.计算窗口的大小

获取窗口的可视区域大小：

  1. var w = document.documentElement.clientWidth || document.body.clientWidth  //clientWidth是对象看到的宽度,不包含边界(border).若包含为offsetWidth
    //如果窗口包含内容超出了窗口可视区域，那么应该使用scrollWidth和scrollHeight属性。
    标准做法 html头
    <!DOCTYPE html>

var a=document.documentElement.scrollTop || document.body.scrollTop;   //获取垂直滚动条从top到滚动的高度
var b=document.documentElement.clientHeight;       //可见高度
var c=document.body.offsetHeight;                  //body+其内边距+滚动条+边框

3.获取手指滑动的长度

  1. var hasTouch = 'ontouchstart' in window && !isTouchPad,
  2. _start:function(e){
  3.      var point = hasTouch ? e.touches[0] : e;
  4.      startY = point.pageY;//chrome,ff,opera pageY相对整个页面的坐标
  5. }
  6. _move:function(e){
  7.      var point = hasTouch ? e.touches[0] : e;
  8.      //offsetY就是手指滑动的垂直距离
  9.      offsetY = point.pageY - startY;
  10. }

通过offsetY>0表示手指下拉，offsetY<0表示手指上拉，页面放在微信上时，如果你向上滑动或者向下滑动屏幕时，会发现一些微信的特征，其代码如下：

  1. var f;
  2. n.addEventListener("touchstart", function(e) {         //n为h5页面的body
  3.                 f = e.touches[0].clientY
  4. },!1),
  5. n.addEventListener("touchmove", function(t) {
  6.   var i = "11"
  7.   , n = this;
  8.   if (0 === n.scrollTop)                                  //滚动条最顶部的情况。
  9.        // 如果说没有滚动条的情况，i = "00"; 有滚动条的情况为“01”,scrollHeight是客户端高度+滚动条高度
  10.        i = n.offsetHeight === n.scrollHeight ? "00" : "01";
  11.   else if (n.scrollTop + n.offsetHeight >= n.scrollHeight)//有滚动条，滚动到最底部的情况。
  12.        i = "10";
  13.  if ("11" !== i) {
  14.        //01是向上滑动或者滑不动，10是向下滑动。
  15.        var r = t.touches[0].clientY - f > 0 ? "10" : "01";
  16.        if (!(parseInt(i, 2) & parseInt(r, 2)))
  17.                         //e(t)
  18. 　　　　　　t.stopPropagation();
  19. 　　　　　　t.preventDefault();
  20.  
  21.       }
  22.   },!1);

4.addEventListener进一步了解

  1. <body>
  2.     <button id="loading" a="xx"></button>
  3.     <script type="text/javascript">
  4.         var eventObj = {
  5.             a:'hello world!',
  6.             handleEvent:function () {
  7.                   alert(this.a);
  8.             }
  9.         }
  10.  document.getElementById('loading').addEventListener('click',eventObj);
  11.     </script>
  12. </body>

一般addEventListener第二个参数为一个函数，也可以为一个对象，不过对象必须有handleEvent这个成员，才能触发事件，触发的也是handleEvent函数，否则就不能触发。

5.给IOS系统的微信页面赋Title

  1. function setIOStitle(title) {
  2.     $body = $('body');
  3.     document.title = title;
  4.     var $iframe = $('<iframe src="/assets/img/settitle.png"></iframe>').on('load', function() {
  5.         setTimeout(function() {
  6.            $iframe.off('load').remove();
  7.         }, 0)
  8.     }).appendTo($body);
  9. }

6.获取到当前页面的活动元素 

获取一个input元素获取到焦点，可以通关下列代码来获取：

  1.     var el = document.activeElement;
  2.     if (el.nodeName.toLowerCase() == 'input'）{
  3.     }//如果去掉void，则x=C;

7.zepto对checkbox的cheked操作无效，需要使用原生态dom进行操作。

  1. $("#dom").attr("checked",true)                      //无效
  2. document.queryselect("#dom").checked = true         //有效,在IOS上这个checked回失效

8.对URL的处理方式（seajs）

8.1 dir和cwd赋值

  1. //获取页面引用JS的路径
  2. function getScriptAbsoluteSrc(node) {
  3.   return node.hasAttribute ? // non-IE6/7
  4.          node.src :
  5.          // see http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx
  6.          node.getAttribute("src", 4)
  7. }
  8. //"js/user/account.js?t=20170815"
  9. var loaderScript = doc.getElementById("seajsnode") || scripts[scripts.length - 1];
  10. //cwd为dirname(doc.URL);
  11. //有三种情况，第一获取id="seajsnode"节点的src来获取加载路径，第二获取最后一个脚本节点的src，最后才是URL。
  12. //loaderDir有二个类别值，绝对路径和相对路径。
  13. var loaderDir = dirname(getScriptAbsoluteSrc(loaderScript) || cwd);
  14. // The loader directory，初始时给data对象的两个成员赋值。
  15. data.dir = loaderDir；
  16. // The current working directory
  17. data.cwd = cwd

8.2 base赋值

  1. var BASE_RE = /^(.+?\/)(\?\?)?(seajs\/)+/
  2.  
  3. // The root path to use for id2uri parsing
  4. // If loaderUri is `http://test.com/libs/seajs/[??]
  5. //[seajs/1.2.3/]sea.js`, the baseUri should be
  6. //http://test.com/libs/`
  7. data.base = (loaderDir.match(BASE_RE) || ["", loaderDir])[1]
  8. //有两种合理性，一是loadDir匹配到了BASE_RE,类似于xx/yy/??seajs/
  9. //那么data.base = xx/yy/,否则为loaderDir，我们一般也是用到
  10. //data.base为loaderDir

9.元标签

<meta name="viewport" width="device-width">

把视口的的css像素设置为物理像素。如果是在视网膜屏的话，会发现图片都会放大了。

10. button 标签有disabled, button不会有click事件触发。

 

隔离click事件的更多相关文章

  1. 移动开发那些坑之——safari mobile click事件的冒泡bug

    今天在iphone6 plus的safari上测试这么一段代码: <script> $(document).on('click','.callApp', function() { aler ...

  2. js动态绑定click事件时function传参问题

    今天碰到了这样一个问题,我在javascript中动态创建了一个button, 然后我想给改button添加click事件,绑定的function想要传入一个变量参数, 一开始我想直接通过函数传参传进 ...

  3. jquery 自定义click事件执行多次

    用jquery绑定一个按钮click事件后,第一次点击后一切正常,第二次点击竟然执行两次,以后越来越多, 后来查看文档发现 jquery click 不是替换原有的function 而是接着添加,所以 ...

  4. 关于a标签自身的click事件所带来的一些影响

    众所周知a标签自身带有点击事件<a href="#"></a>从它本身的特性来讲并没有什么不好的影响,但是如果你在a标签里又加入onclick事件则< ...

  5. 关于IOS浏览器：document,body的click事件触发规则

    今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...

  6. js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法

    HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...

  7. JavaScript区分click事件和mousedown（mouseup、mousemove）方法

    在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果.而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouse ...

  8. fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别

    之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms ...

  9. 移动端的传统click事件延迟和点透现象

    一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重 ...

随机推荐

  1. 顺序队列的C语言实现

    #include <stdio.h> #define MAXSIZE 101 #define ELEMTYPE int #define QUEUE_EMPTY -10000 typedef ...

  2. 一个很好的UML工具

    访问地址:www.visual-paradigm.com 工具使用帮助文档地址: http://www.visual-paradigm.com/support/documents/vpumluserg ...

  3. 100735D

    排序+搜索 为什么这是对的呢?其实我不是很清楚 大概是这个样子的:我们希望构成三角形的三个数尽可能集中,因此在搜索中贪心地选取从最小依次往上,选取三条边,但是总感觉有反例,先挖个坑... #inclu ...

  4. SSM三大框架（转发）

    转自:SSM三大框架整合详细教程(Spring+SpringMVC+MyBatis) 使用SSM(Spring.SpringMVC和Mybatis)已经有三个多月了,项目在技术上已经没有什么难点了,基 ...

  5. dede使用方法---如何调用指定栏目

    使用dede的时候,我们需要调用某一个指定的栏目,这个时候我们该如何使用标签呢?? 真相就是----{dede:type typeid='27'}*******{/dede:type} 完整的标签代码 ...

  6. java.lang.IllegalStateException: Ambiguous mapping found. Cannot map 'XXXXX' bean

    今天启动srpingmvc项目的时候出现了这个异常, 原因: 在同个项目中,我复制了其中一个 Controller 作为备份 却忘记修改  @RequestMapping("/xxx&quo ...

  7. 解决Eclipse建立Maven项目后无法建立src/main/java资源文件夹的办法

      建立好一个Maven项目后,如果Java Resources资源文件下没有src/main/java文件夹,并且在手动创建这个文件时提示“已存在文件”. 这说明,在这个项目配置中已经有了src/m ...

  8. Cocoa pod的使用注意点

    一.CocoaPods是什么? CocoaPods是一个负责管理iOS项目中第三方开源库的工具.CocoaPods的项目源码在Github上管理.该项目开始于2011年8月12日,在这两年多的时间里, ...

  9. 翻滚吧，Spark （错误记录）

    1) 本地运行报错: Exception in thread "main" org.apache.spark.SparkException: A master URL must b ...

  10. SVN分支研究

    在结合之前总结的定制开发的产品版本开发问题解决的方法:http://www.cnblogs.com/EasonJim/p/5971906.html,今天来研究以下用SVN处理这类的问题. 研究SVN分 ...