<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. MVC Ajax 提交是防止SCRF攻击

    //在View中 <script type="text/javascript"> @functions{ public string ToKenHeaderValue( ...

  2. 网页版 treeview使用中遇到的问题

    <div class="ScrollBar" id="ItemsTree"></div> var cla = $("#Item ...

  3. Android开发手记(17) 数据存储二 文件存储数据

    Android为数据存储提供了五种方式: 1.SharedPreferences 2.文件存储 3.SQLite数据库 4.ContentProvider 5.网络存储 本文主要介绍如何使用文件来存储 ...

  4. hibernate - Transaction not successfully started

    今天在测试 transaction(使用事务进行管理)的时候, 总报错: Transaction not successfully started 可能有多种原因, 这位哥们总结得很好: Transa ...

  5. Java线程:新特征-线程池

    Sun在Java5中,对Java线程的类库做了大量的扩展,其中线程池就是Java5的新特征之一,除了线程池之外,还有很多多线程相关的内容,为多线程的编程带来了极大便利.为了编写高效稳定可靠的多线程程序 ...

  6. 跨域的小小总结:js跨域及跨域的几种解决方法

    一.什么是跨域?? js跨域请求就是使用js访问iframe里的不同域名下的页面内容,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同的域的iframe框架中的数据.即只要域名.协议. ...

  7. Köln-keith jarrett

    在火车上遇到一男生,带着他弟弟.他弟弟跑来跑去的,他就安稳地坐在下铺看书,不知道是哪种语言. 我们都是在北京下车. 第二天在王府井吃饭,姐姐带我吃西餐.我又看到他,跟一个阿姨一起吃饭. 吃饭的时候姐姐 ...

  8. JS-SDK微信支付开发攻略

    一.吐槽篇 一个字——坑!两个字——很坑!三个字——非常坑!首先,微信支付接口作为微信开发接口的一部分,竟然有一本书那么厚的官方文档,共36页,更重要的是,这36页还不能把开发的流程说清楚,描述过于分 ...

  9. [学习笔记]设计模式之Flyweight

    为方便读者,本文已添加至索引: 设计模式 学习笔记索引 写在前面 Flyweight(享元)模式运用共享技术,可以有效地支持大量细粒度的对象.今天我们会去参观小霍比特人们的酿酒工坊……等等,不是享元模 ...

  10. repeater控件实现分页

    repeater控件实现排序的方法,今天我再向大家介绍repeater控件如何实现分页的效果. 分页分为真分页和假分页. 真分页:控件上一页需要显示多少数据,就从数据库取出并绑定多少数据,每次换页时都 ...