隔离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重 ...
随机推荐
- 【BZOJ 1503】【NOI 2004】郁闷的出纳员
$Splay$模板题. 复习一下伸展树的模板. 一定不要忘了push啊!!! 对于减工资后删掉员工的操作,我选择插入一个$min+delta_{减少的工资}$的节点,把它$Splay$到根,砍掉它自己 ...
- Edge detection using LoG
intensity梯度值分布跟图片的大小有关, 比如将一张小图片放大后会变得很模糊, 原先清晰的edge, 即大的梯度值变得模糊. 但是原有的边缘通常还是肉眼可分辨的. 但用Sobel 算子可能就检测 ...
- mysql数据库默认存放位置修改
windows: 方式一 使用符号连接 假设你的mysql安装在c:\mysql,数据目录就是c:\mysql\data 现在你想在D 盘建立一个名为foo的数据库,路径为d:\data\foo. ...
- 【BZOJ-1507】Editor 块状链表
1507: [NOI2003]Editor Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 3397 Solved: 1360[Submit][Stat ...
- springMVC-mvc:annotation-driven
<mvc:annotation-driven/>会自动注册 RequestMappingHandlerMapping RequestMappingHandlerAdapter Except ...
- Jenkins配置MSBuild编译.net4.6的项目
经过测试,如果用原始的msbuild,会出现语法无法识别的问题,"C:\Windows\Microsoft.NET\Framework64\v4.0.30319\MSBuild.exe&qu ...
- 洛谷P1209 [USACO1.3]修理牛棚 Barn Repair
题目描述 在一个夜黑风高,下着暴风雨的夜晚,farmer John的牛棚的屋顶.门被吹飞了. 好在许多牛正在度假,所以牛棚没有住满. 牛棚一个紧挨着另一个被排成一行,牛就住在里面过夜. 有些牛棚里有牛 ...
- 几个pointer
[备份]了解initramfs,越往深处走觉着需要了解的东西越多,所以干脆回来,从实际系统的实现开始寻迹.在学习的这个系统中,里面用了busybox,实现的系统可谓精简之又精简.早上主要学习了root ...
- python中isort的使用
是一个使import 列表更美观的工具包,官方例子如下: before from my_lib import Object print("Hey") import os from ...
- iOS自动处理键盘事件的第三方库：IQKeyboardManager
我们写界面要考虑很多用户体验问题,键盘事件的响应就是比较麻烦的一种.我们需要监听键盘事件,考虑点击背景收起键盘.考虑键盘遮挡输入框问题等等,而且每个界面都要做这么一套.这个库帮我们解决了这个事情. 这 ...