1.隔离click事件

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

     $(document).on('click', '#inp', function(e){

         alert('hello world!');

     });

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

document.addEventListener('click',touch, true);

function touch (event){

    switch(event.type){

       case "click":

       event.preventDefault();

       event.stopPropagation();

    }

    break;

}

2.计算窗口的大小

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

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.获取手指滑动的长度

var hasTouch = 'ontouchstart' in window && !isTouchPad,

_start:function(e){

     var point = hasTouch ? e.touches[0] : e;

     startY = point.pageY;//chrome,ff,opera pageY相对整个页面的坐标

}

_move:function(e){

     var point = hasTouch ? e.touches[0] : e;

     //offsetY就是手指滑动的垂直距离

     offsetY = point.pageY - startY;

}

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

var f;

n.addEventListener("touchstart", function(e) {         //n为h5页面的body

                f = e.touches[0].clientY

},!1),

n.addEventListener("touchmove", function(t) {

  var i = "11"

  , n = this;

  if (0 === n.scrollTop)                                  //滚动条最顶部的情况。

       // 如果说没有滚动条的情况，i = "00"; 有滚动条的情况为“01”,scrollHeight是客户端高度+滚动条高度

       i = n.offsetHeight === n.scrollHeight ? "00" : "01";

  else if (n.scrollTop + n.offsetHeight >= n.scrollHeight)//有滚动条，滚动到最底部的情况。

       i = "10";

 if ("11" !== i) {

       //01是向上滑动或者滑不动，10是向下滑动。

       var r = t.touches[0].clientY - f > 0 ? "10" : "01";

       if (!(parseInt(i, 2) & parseInt(r, 2)))

                        //e(t)

　　　　　　t.stopPropagation();

　　　　　　t.preventDefault();

      }

  },!1);

4.addEventListener进一步了解

<body>

    <button id="loading" a="xx"></button>

    <script type="text/javascript">

        var eventObj = {

            a:'hello world!',

            handleEvent:function () {

                  alert(this.a);

            }

        }

 document.getElementById('loading').addEventListener('click',eventObj);

    </script>

</body>

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

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

function setIOStitle(title) {

    $body = $('body');

    document.title = title;

    var $iframe = $('<iframe src="/assets/img/settitle.png"></iframe>').on('load', function() {

        setTimeout(function() {

           $iframe.off('load').remove();

        }, 0)

    }).appendTo($body);

}

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

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

    var el = document.activeElement;

    if (el.nodeName.toLowerCase() == 'input'）{

    }//如果去掉void，则x=C;

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

$("#dom").attr("checked",true)                      //无效

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

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

8.1 dir和cwd赋值

//获取页面引用JS的路径

function getScriptAbsoluteSrc(node) {

  return node.hasAttribute ? // non-IE6/7

         node.src :

         // see http://msdn.microsoft.com/en-us/library/ms536429(VS.85).aspx

         node.getAttribute("src", 4)

}

//"js/user/account.js?t=20170815"

var loaderScript = doc.getElementById("seajsnode") || scripts[scripts.length - 1];

//cwd为dirname(doc.URL);

//有三种情况，第一获取id="seajsnode"节点的src来获取加载路径，第二获取最后一个脚本节点的src，最后才是URL。

//loaderDir有二个类别值，绝对路径和相对路径。

var loaderDir = dirname(getScriptAbsoluteSrc(loaderScript) || cwd);

// The loader directory，初始时给data对象的两个成员赋值。

data.dir = loaderDir；

// The current working directory

data.cwd = cwd

8.2 base赋值

var BASE_RE = /^(.+?\/)(\?\?)?(seajs\/)+/

// The root path to use for id2uri parsing

// If loaderUri is `http://test.com/libs/seajs/[??]

//[seajs/1.2.3/]sea.js`, the baseUri should be

//http://test.com/libs/`

data.base = (loaderDir.match(BASE_RE) || ["", loaderDir])[1]

//有两种合理性，一是loadDir匹配到了BASE_RE,类似于xx/yy/??seajs/

//那么data.base = xx/yy/,否则为loaderDir，我们一般也是用到

//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. 用Okhttp框架登录之后的Cookie设置到webView中(转)

    1.webview中设置: [java] view plain copy @SuppressWarnings("deprecation") public void synCooki ...

  2. iOS开发小技巧--即时通讯项目:使用富文本在UILabel中显示图片和文字;使用富文本占位显示图片

    Label借助富文本显示图片 1.即时通讯项目中语音消息UI的实现,样式如图: 借助富文本在UILabel中显示图片和文字 // 1.创建一个可变的富文本 NSMutableAttributedStr ...

  3. windows2003开启vpn服务

    远程连接登陆到Windows服务器,在配置VPN之前,需要设置两个地方: 1.请确认windows自带的防火墙处于关闭状态,可以在我的电脑点右键>>管理>>服务和应用程序> ...

  4. git初体验（五）SSH的理解

    一.SSH SSH是Secure shell的缩写,即"安全外壳协议",专为远程登录会话和其他网络服务提供安全性的协议,是一项计算机上的安全协议. 传统的网络服务程序,如rsh.F ...

  5. 68.Android之透明状态栏

    转载:http://www.jianshu.com/p/2f17d0e7f6b0 Android开发中需要透明状态栏,注意:本文只适配Android4.4以上及5.0以上设备 概述 有时候我们想在 a ...

  6. BZOJ 2683: 简单题

    2683: 简单题 Time Limit: 50 Sec  Memory Limit: 128 MBSubmit: 913  Solved: 379[Submit][Status][Discuss] ...

  7. Leetcode Find Minimum in Rotated Sorted Array I and II

    Suppose a sorted array is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 migh ...

  8. 【BZOJ-1458】士兵占领 最大流

    1458: 士兵占领 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 782  Solved: 456[Submit][Status][Discuss] ...

  9. 【PowerOJ1739】 魔术球问题

    https://www.oj.swust.edu.cn/problem/show/1739 (题目链接) 题意 n个柱子上放小球,每根柱子上相邻两个小球的数字之和必须是完全平方数,只有放了x号小球才可 ...

  10. pack、unpack自制二进制“数据库”

    引言 pack.unpack函数,如果没有接触过socket,这个可能会比较陌生,这两个函数在socket交互的作用是组包,将数据装进一个二进制字符串,和对二进制字符串中的数据进行解包,这个里面有好多 ...