<div id="box">box</div>
<script>
var isTouchDevice = function() {
return 'ontouchstart' in window
}()
var startEvt = isTouchDevice ? 'touchstart' : 'mousedown'
var moveEvt = isTouchDevice ? 'touchmove' : 'mousemove'
var endEvt = isTouchDevice ? 'touchend' : 'mouseup'
var box = document.querySelector('#box') function add(type) {
var div = document.createElement('div')
div.innerHTML = type
box.appendChild(div)
}
box.addEventListener(startEvt, function(event) {
add(startEvt)
})
box.addEventListener(moveEvt, function(event) {
add(moveEvt)
})
box.addEventListener(endEvt, function(event) {
//event.preventDefault()
add(endEvt)
})
box.addEventListener('click', function(event) {
add('click')
})
</script>

document.body的click事件无效

document.documentElement的click事件ok

touchend事件的preventDefault阻止掉了click事件的更多相关文章

  1. 如何用按钮的click事件去触发a标签的click事件

    在jQquery中,可以用如下方式触发input.a标签的click事件: <input id="my_input" /> <a id="my_a&qu ...

  2. a标签包着img事件 ie下 a标签的click事件失效

    整个大的背景框有个点击事件, 如果标签结构是(详细的css样式略) a{background:green;} <a href=""> <img src=" ...

  3. 移动端click事件延迟300ms的原因以及解决办法

    这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为大屏幕设备所设计的.于是苹果的工程师们做了一些约定,应对 iPhone 这种小屏幕浏览桌面端站点 ...

  4. 移动端click事件延迟300ms的原因以及解决办法[转载]

    原文:http://www.bubuko.com/infodetail-822565.html 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题 —— 当时的网站都是为 ...

  5. 移动端web,tap与click事件

    一.tap与click的区别 两者都会在点击时系统自动触发,但是在手机WEB端,click会有 200~300 ms.延迟来自判断双击和长按,因为只有默认等待时间结束以确定没有后续动作发生时,才会触发 ...

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

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

  7. javascript 阻止事件冒泡和阻止默认事件对比

    公司项目有像上图中效果的功能需求这也是很常见功能很简单功能,通过一个小例子和大家聊聊js的事件冒泡和默认事件. 先说说一般的实现方式即使用阻止事件冒泡的方式去做,给input绑定一个click事件(并 ...

  8. 移动端click事件延迟300ms到底是怎么回事,该如何解决?

    不管在移动端还是PC端,我们都需要处理用户点击,这个最常用的事件.但在touch端click事件响应速度会比较慢,在较老的手机设备上会更为明显(300ms的延迟). 问题由来 这要追溯至 2007 年 ...

  9. safari浏览器click事件要点击两次才有响应出现闪烁

    闪烁问题 由于在iOS Safari上click事件存在300ms响应延时,所以为touch事件添加样式,会和click事件默认样式叠加而产生闪烁问题. 因为ios safari浏览器中对触摸事件的响 ...

随机推荐

  1. [XML] C# XmlHelper操作Xml文档的帮助类 (转载)

    点击下载 XmlHelper.rar 主要功能如下所示 /// <summary> /// 类说明:XmlHelper /// 编 码 人:苏飞 /// 联系方式:361983679 // ...

  2. 为什么每个浏览器都有Mozilla

    你是否好奇标识浏览器身份的User-Agent,为什么每个浏览器都有Mozilla字样? Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 ...

  3. Gulp-入门教程 搭配环境

    之前一直听朋友谈起gulp,但没有使用过,最近有机会接触到,现在给大家分享下,不对的地方还请指正.我一直以为互相分享是学习的一种好方式.下面进入正题: 首先来了解下gulp,最起码要知道:我们为什么要 ...

  4. mysql 链接数据库

    一.MySQL 连接本地数据库,用户名为“root”,密码“root”(注意:“-p”和“root” 之间不能有空格) C:\>mysql -h localhost -u root -proot ...

  5. 小知识 Vector的枚举 和foreach的用法

    package com.java.c.votetor.www; import java.util.Enumeration;import java.util.Iterator;import java.u ...

  6. jquery前端性能优化(持续添加。。。)

    1.选择器的使用 (1)$('#id')   使用id来定位dom元素是性能最高的方法.jQuery底层将直接调用本地方法document.getElementById().如果id直接可以找到所要对 ...

  7. 帝国cms灵动标签调用tags

    这个语法用来调用[指定分类][指定条件]的所有tags [e:loop={"select * from [!db.pre!]enewstags order by num desc limit ...

  8. 帝国cms在任意位置调用指定id的栏目名称和链接

    注意,这个代码无须放在灵动标签中,直接写入模板相应的位置就行了.[1]调用栏目名称: <?=$class_r[栏目ID]['classname']?>   示例:<?=$class_ ...

  9. python【第十二篇】Mysql基础

    内容: 1.数据库介绍及MySQL简介 2.MySQL基本操作 1 数据库介绍 1.1什么是数据库? 数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,每个数据库都有一个或多个不同 ...

  10. 关于【键鼠<局域网>共享软件:synergy】install

    Installation 另外,本人在centos6.5环境下作为server运行时,遇到一个问题,synergy1.5随着系统升级居然变成了1.3X,所以如果遇到类似问题,请您先用 rpm -qa ...