隔离click事件
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事件的更多相关文章
- 移动开发那些坑之——safari mobile click事件的冒泡bug
今天在iphone6 plus的safari上测试这么一段代码: <script> $(document).on('click','.callApp', function() { aler ...
- js动态绑定click事件时function传参问题
今天碰到了这样一个问题,我在javascript中动态创建了一个button, 然后我想给改button添加click事件,绑定的function想要传入一个变量参数, 一开始我想直接通过函数传参传进 ...
- jquery 自定义click事件执行多次
用jquery绑定一个按钮click事件后,第一次点击后一切正常,第二次点击竟然执行两次,以后越来越多, 后来查看文档发现 jquery click 不是替换原有的function 而是接着添加,所以 ...
- 关于a标签自身的click事件所带来的一些影响
众所周知a标签自身带有点击事件<a href="#"></a>从它本身的特性来讲并没有什么不好的影响,但是如果你在a标签里又加入onclick事件则< ...
- 关于IOS浏览器：document,body的click事件触发规则
今天做了个手机页面,点击某个按钮->弹出菜单,再点击菜单以外的任意位置->关闭菜单,在其他浏览器里面没有问题,但是在IOS浏览器中并不会关闭. 网上解决这个bug的帖子很多,这篇帖子主要是 ...
- js(jquery)解决input元素的blur事件和其他非表单元素的click事件冲突的方法
HTML结构:很简单,就一个input,一个div,能说明问题就OK了: <input type="text" value="默认值"><br ...
- JavaScript区分click事件和mousedown（mouseup、mousemove）方法
在前端开发工作中,会遇到这样问题:针对同一个dom元素,即希望为它绑定click事件,又想该元素可以允许拖拽的效果.而使用拖拽的效果,我们一般就会用到mousedown,mousemove和mouse ...
- fastclick与zepto的 tap事件关于在手机上click事件的300ms延迟的区别
之前翻译过一篇关于fastclick的快速点击文章http://www.cnblogs.com/lilyimage/p/3568773.html,fastclick可以解决在手机上点击事件的300ms ...
- 移动端的传统click事件延迟和点透现象
一.场景描述: 1.A/B两个层上下z轴重叠. 2.上层的A点击后消失或移开.(这一点很重要) 3.B元素本身有默认click事件(如a标签) 或 B绑定了click事件. 在以上情况下,点击A/B重 ...
随机推荐
- zabbix 监控java程序
http://www.tuicool.com/articles/IRnM7f http://transcoder.baidu.com/from=1012852q/bd_page_type=1/ssid ...
- asp.net mvc 多级目录结构
ikmb@163.com ASP.NET MVC默认的文件组织和URL访问都是一级,我们通常要将一个功能模块组织到一个目录下.方法是:1.文件组织 分别在Controllers和Views文件夹下建议 ...
- 【BZOJ 2118】墨墨的等式
http://www.lydsy.com/JudgeOnline/problem.php?id=2118 最短路就是为了找到最小的$x$满足$x=k×a_{min}+d,0≤d<a_{min}$ ...
- React 点击按钮显示div与隐藏div，并给div传children
最近做了一个react的点击按钮显示与隐藏div的一个小组件: [筛选]组件FilterButton import React,{Component} from 'react'; import {re ...
- 页面打开自动触发onlick事件
<script type="text/javascript"> // 两秒后模拟点击 setTimeout(function() { // IE if(document ...
- CodeForces 450B 矩阵
A - Jzzhu and Sequences Time Limit:1000MS Memory Limit:262144KB 64bit IO Format:%I64d & ...
- TreeMap按照value进行排序
TreeMap底层是根据红黑树的数据结构构建的,默认是根据key的自然排序来组织(比如integer的大小,String的字典排序).所以,TreeMap只能根据key来排序,是不能根据value来排 ...
- Hadoop实战第一篇
前言: 都说现在是草根为尊的时代,近年来hadoop及spark技术在国内越来越流行.而且渐渐现成为企业的新宠.在DT时代全面来临之前,能提早接触大数据的技术必然能先人一步.本文作为Hadoop系列 ...
- springmvc使用RSA算法加密表单
今天被吐槽在客户端用js对密码进行md5加密其实也不见得安全.这种做法其实不见得有什么作用,学过计算机网络都知道,在网上抓一个包是很简单的事,就算别人抓包抓不到你原始密码,用这个md5后的密码一样可以 ...
- js-FCC算法Smallest Common Multiple。找出两个参数和它们之间的连续数字的最小公倍数。
存档. 找出能被两个给定参数和它们之间的连续数字整除的最小公倍数. function smallestCommons(arr) { //分解质因数法,分解为若干个质数相乘 var arrratio=[ ...