隔离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重 ...
随机推荐
- 【codevs 1565】【SDOI 2011】计算器 快速幂+拓展欧几里得+BSGS算法
BSGS算法是meet in the middle思想的一种应用,参考Yveh的博客我学会了BSGS的模版和hash表模板,,, 现在才会hash是不是太弱了,,, #include<cmath ...
- 初探psutil
系统性能信息模块psutil 1,psutil简介 psutil是一个跨平台能够轻松获取系统的进程和系统利用率,主要应用在系统监控,分析和限制系统资源以及进程管理.它实现了很多系统管理的命令,如ps, ...
- HTTP协议学习---（九）cookie
Cookie是HTTP协议中非常重要的东西, 之前拜读了Fish Li 写的[细说Cookie], 让我学到了很多东西.Fish的这篇文章写得太经典了. 所以我这篇文章就没有太多内容了. 最近我打算写 ...
- win7 系统无法复制粘贴解决方案
用远程桌面登陆服务器不能在本机和远程服务器之间粘贴文本了,即不能从本机复制文本粘贴到服务器,也不能从服务器复制文本粘贴到本机. 以下是解决方法之一,试了几次都很管用户:在服务器上打开任务管理器,查看进 ...
- win7安装nodejs
刚刚在网上看到Cheerio,为服务器特别定制的,快速.灵活.实施的jQuery核心实现,适合各种Web爬虫程序. 看了下,cheerio 是nodejs的抓取页面模块 于是决定先学习下nodejs了 ...
- Ubuntu下matlab快捷键设置
ubuntu15.04, matlab2016a 默认按键ctrl+s无法保存,ctrl+z无法撤销.因为用的是emacs的快捷键.emacs的快捷键不熟悉会觉得很复杂,果断改为windows风格的: ...
- my97日期控件
http://www.seabroad.cn/cq/datepick/demo.htm 但是由于某些原因,担心这个网站不稳定,所以复制一下 一. 简介 1. 简介 目前的版本是:4.0 Prerele ...
- ( 译、持续更新 ) JavaScript 上分小技巧(四)
后续如有内容,本篇将会照常更新并排满15个知识点,以下是其他几篇译文的地址: 第一篇地址:( 译.持续更新 ) JavaScript 上分小技巧(一) 第二篇地址:( 译.持续更新 ) JavaScr ...
- pyenv的使用
开始想使用virtual实现不同的版本的py隔离,然后发现不太方便,然后发现了这货. pyenv安装(ubuntu环境 ➜ ~ git clone git://github.com/yyuu/pyen ...
- C# 开源项目一
商业协作和项目管理平台-TeamLab 网络视频会议软件-VMukti 驰骋工作流程引擎-ccflow [免费]正则表达式测试工具-Regex-Tester Windows-Phone-7-SDK E ...