首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JS篇(028)-移动端 click 事件、touch 事件、tap 事件的区别

参考答案: 1.click 事件在移动端会有 200-300ms 的延迟,主要原因是苹果手机在设计时,考虑到用户在浏览网页时需要放大,所以,在用户点击的 200-300ms 之后,才触发 click,...如果 200-300ms 之内还有 click,就会进行放大缩小。...mouseover mouseup 的触发 3.tap 事件在移动端,代替 click 作为点击事件,tap 事件被很多框架(如 zepto)封装,来减少这延迟问题, tap 事件不是原生的,所以是封装的...display: none,而从上面的 tap 可以看出,有 touchstart、touchend,所以会 300ms 之后触发 click 事件,而 z-index 已经消失了,所以,触发了下面的...a 的 click 事件,注意: 我们认为 a 标签默认是绑定了 click 事件的。

5.7K40
您找到你想要的搜索结果了吗?
是的
没有找到

代码触发,手动触发touchstart事件,touch事件click事件,自定义事件

工作中有时候会用到需要用代码去手动触发某个事件或者是自定义事件,通常触发click事件的做法为eleme.click(),遇到touchstart就行不通了。...可以使用以下方式 // 创建事件. var event = document.createEvent('Events'); // 初始化一个点击事件,可以冒泡,无法被取消 event.initEvent...('touchstart', true, false); // 设置事件监听. elem.addEventListener('touchstart', function (e) { //...e.target 就是监听事件目标元素 }, false); // 触发事件监听 elem.dispatchEvent(event); initEvent已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它...'touchstart', function (e) { ... }, false); // 触发event. elem.dispatchEvent(event); Event构造函数也可以使用自定义事件

4.6K30

Android触摸事件和mousedown、mouseup、click事件之间的关系

,如果没有改变,会按照mousedown,mouseup,click的顺序触发事件。...特别需要提到的是,只有再触发一个触屏事件时,才会 触发上一个事件的mouseout事件。 二、mousedown、mouseup、click事件之间的关系 点击select标签元素的时候,会弹出下拉。...首先想到是利用click事件控制,发现仍然会有下拉出现…实际这个是mousedown事件控制的。 这里就说明下click和mousedown、mouseup。...规范要求,只有在同一个元素上相继触发 mousedown 和 mouseup 事件,才会触发 click 事件;如果 mousedown 或 mouseup 中的一个被取消,就不会触发 click 事件...实际这个就利用了click事件要求在同一个元素相继触发mousedown和 mouseup 事件

2.6K30

jQuery 双击事件(dblclick)时,不触发单击事件(click)

出处:jQuery 双击事件(dblclick)时,不触发单击事件(click) 在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click)。...即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick...mouseout,click,dblclick; 在双击事件(dblclick),触发的两次单击事件(click)中,第一次的单击事件(click)会被屏蔽掉,但第二次不会。...(TimeFn); //执行延时 TimeFn = setTimeout(function(){ //do function在此处写单击事件要执行的代码 },300...); }); $('div').dblclick(functin () { // 取消上次延时未执行的方法 clearTimeout(TimeFn); //双击事件的执行代码

5.1K30

jQuery源码解析之click()的事件绑定

二、$().click() 作用: 为目标元素绑定点击事件 源码: //这种写法还第一次见,将所有鼠标事件写成字符串再换成数组 //再一一绑定到DOM节点上去 //源码10969行 jQuery.each...( { //在被选元素及子元素上添加一个或多个事件处理程序 //$().on('click',function()=<{}) //源码5817行 on: function...,也就是说,click()/on() 的本质是 element.addEventListener() 事件,前面一系列的铺垫,都是在为目标 jQuery 对象添加必要的属性。...:mouse|pointer|contextmenu|drag|drop)|click/, //事件类型的命名空间 //举例:var arr1 = "click.aaa.bbb".match...(rtypenamespace); //console.log(arr1);//["click.aaa.bbb", "click", "aaa.bbb", index: 0, input: "click.aaa.bbb

1.6K20

Layui前端框架中的Button添加Click事件

("#withExport").click(function(){ layer.msg("点击事件"); });   这种适合页面加载时就存在的元素。   ...二、使用原生js绑定 document.getElementById("#btn_submit").addEventListener(‘click’, function(){ }, false);...2、使用原生js代码量稍大,事件绑定方式为复写绑定,即绑定多个只保留最后一个绑定的方法。 原生js,这是真正的熟练者的工具,如果能写明白更好。...3、使用onclick标签绑定,代码量不大,但是html前端和js前端混在一起,不易于维护。 原则上HTML代码只能体现网页的结构,具体的行为应该使用JavaScript代码进行绑定。...如果在HTML中用onclick事件混杂js,会导致html前端和js前端的工作混在了一起,难以分离工作任务, 进而难以维护。

4.5K20

不完美解决click和dblclick事件冲突问题

情况描述   当某个元素,如:div,同时绑定了click事件和dblclick事件,而这两个事件又要处理相对独立的业务,也就是click的时候不能触发dblclick,dblclick的时候不能触发click...-- mouseup -- click -- mousedown -- mouseup -- click -- dblclick   由此看来,在dblclick触发之前,实际上是执行了2次click...解决方案   最先想到的是否可以停止事件,但发现浏览器并未提供相应方法,如果自己去实现难度太大,因为单击事件所关联的行为必须做成是可以被cancel的才行。   ...于是考虑用延迟,也是我唯一能想到的解决办法,利用setTimeout()来延迟完成click事件的处理,然后在需要屏蔽click的时候用clearTimeout()来停止。...具体代码 var test = (function(){ var clickText = 'click'; var dblclickText = 'dblclick'; var timer

1.1K20
领券