@touchstart 导致子盒子不执行click

2024-09-05

如何解决 touchstart 事件与 click 事件的冲突

一 · 业务场景的描述在对已完成的PC站点进行移动端适配时,我们想要站点在移动设备上有更快的响应速度,以带给用户更好的体验,此时,我们应该使用移动设备专用的事件系统,例如,使用 touchstart 事件代替 click 事件. 为什么这样效果会更好呢?根据Google开发者文档中的描述: 移动设备上的浏览器将会在 click 事件触发时延迟 300ms ,以确保这是一个“单击”事件而非“双击”事件. 而对于 touchstart 事件而言,则会在用户手指触碰屏幕的一瞬间触发所绑定的事件.所以

JD . 圆角矩形、权重层级、浮动撑开盒子及元素的默认间距、清除浮动、隐藏盒子、盒子的撑开与撑破、子盒子垂直居中|不占位置

---恢复内容开始--- 圆角矩形 border-radius:50% 40% 30% 33px: 像素.百分比.小数( 0.5 ) 左上.右上.右下.左下权重: 标签 1 : 类选择器 10 : ID选择器 100 :行内样式 1000: !important 无穷大: 层级浮动/标准的盒子代码位置越往下,层级越高层级一样,代码在后面的盒子会压住前面的盒子浮动的盒子会压住标准的定位的盒子会压住浮动的高低和占不占位置无关,relative占位置,也比不占位置的浮动层

go语言之进阶篇主协程先退出导致子协程没来得及调用

1.主协程先退出导致子协程没来得及调用示例: package main import ( "fmt" "time" ) //主协程退出了,其它子协程也要跟着退出 func main() { go func() { i := 0 for { i++ fmt.Println("子协程 i = ", i) time.Sleep(time.Second) } }() //别忘了() } 执行结果 (备注:没有结果,主协程退出,子协程也跟着退出了.)

父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响

原文地址背景开发过程中遇到问题,简单写个demo 运行环境为Chrome 68 描述一下这个问题,当a标签内部存在嵌套时, 父元素a标签的href默认行为以及子元素绑定的click事件的响应之间存在影响.页面结构: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" con

按enter执行click或者搜索问题

最近需要将按按钮搜索的功能,改为支持按enter回车键,搜索. 实现按enter,执行click事件还是比较简单的. //按回车搜索用户 $(window).keydown(function (event) { //alert("您按了键"); if (event.keyCode == 13) { //alert("您按了enter"); // var source = $("#<%=Button1.ClientID %>").cl

css 子盒子上下居中文字溢出省略号

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>document</title> <style> *{margin:0;padding:0;} .box{width: 200px;height: 100px;background: red;position: relative;} .box .

flexbox子盒子flex属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .flex-container { display: flex; height: 400px; background-color: gray; } .flex-item { background-

CASE：DB shutdown/open 过程中发生异常导致JOB不能自动执行

CASE:DB shutdown/open 过程中发生异常导致JOB不能自动执行现象: 一个DB中的所有JOB在3月25日之后就不再自动运行,查询DBA_JOBS,发现LAST_DATE定格在3月25日之前. SQL> show parameter job NAME TYPE VALUE ------------------------------------ ----------- ------------------------------ job_queue_processes inte

[RN] React Native中使用 react-native-scrollable-tab-view嵌套在ScrollView里，导致子内容在安卓上无法显示

React Native中使用 react-native-scrollable-tab-view嵌套在ScrollView里,导致子内容在安卓上无法显示问题: 0.9.0 或 0.8.0 版本的react-native-scrollable-tab-view如果外层使用了一个ScrollView,在Android端上是无法显示的,iOS上显示无问题. 类似代码如下: <}}> <ItemMoment navigation={this.props.navigation} item={

c# ThreadPool 判断子线程全部执行完毕的四种方法

1.先来看看这个多线程编程多线程用于数据采集时,速度明显很快,下面是基本方法,把那个auto写成采集数据方法即可. using System; using System.Collections.Generic; using System.Text; using System.Threading; namespace ConsoleApplication1 { class Program { static void Main(string[] args) { try { ThreadPool.

2-Qt关闭子窗口时执行特定代码

https://blog.csdn.net/naibozhuan3744/article/details/82689434 本文主要总结在关闭qt的QWidget子窗口瞬间,执行特定代码.由于主窗口关闭时,会自动执行析构函数,而子窗口关闭时,却不会调用析构函数,进过博主查阅资料,发现有两种方法可以在子窗口关闭时,调用析构函数或者执行一个关闭函数. 第一种方法是关闭窗口时调用窗口的析构函数,直接在构造函数添加如下代码,然后就可以调用子窗口析构函数了. setAttribute(Qt::WA_Del

div嵌套导致子区域margin-top失效不起作用的解决方法

有两个嵌套关系的div,如果外层div的父元素padding值为0, 那么内层div的margin-top或者margin-bottom的值会"转移"给外层div,使父元素产生上外边距. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

Linux账号密码过期会导致crontab作业不能执行

今天一同事报告Linux服务器上的crontab作业没有运行,检查/var/log/cron日志后发现下面错误信息 Jan 19 16:30:01 xxxx crond[31399]: Authentication token is no longer valid; new one required Jan 19 16:30:01 xxxx crond[31400]: Authentication token is no longer valid; new one required Jan 19

ActivityGroup里面装的子Activity不执行OnActivityResult()的解决办法

转自http://blog.csdn.net/snakewarhead/article/details/7976831 tab activity 中调用startActivityForResult 以获取子activity的运行结果时,会有一个问题,那就是 onActivityResult 方法无法被回调. 这通常发生在ActivityGroup中,(我估计的,未研究源码)其原因在于从 tab activity 进入子activity时,ActivityGroup进入了活动栈,而不是tab

ViewPager相互嵌套，导致子ViewPager无法滑动，且子ViewPager中的view无法被点击

场景:当使用ViewPager进行嵌套的时候,子viewPager是无法进行嵌套的,因此我们要重写ViewPager类,并重写里层viewPager类中的onTouchEvent方法,调用其父控件的requestDisallowInterceptTouchEvent()方法,让父viewPager不影响子viewPager的滑动. 1,创建一个类MyviewPager,并写入以下代码: public class MyViewPager extends ViewPager { publi

[Robot Framework] Robot Framework用Execute Javascript对XPath表示的元素执行Click操作

Execute Javascript document.evaluate("//a[contains(@href,'createBook')]", document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null).snapshotItem(0).click()

ajax异步导致js方法顺序执行不了

js两个方法调用的顺序,有时候是这样的 f1(); f2(); 本来是先执行f1的,但是如果f1里面进行ajax异步 async:true,那么可能会先执行f2,如果想要顺序执行,那么就把异步设置为 async:false,从晚上十点多调试到刚刚,耗费了几个小时,所以有必要记录一下

flexbox子盒子align-self属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .flex-container { display: flex; width: 700px; height: 400px; background-color: gray; } .flex-item

js事件中绑定另一事件导致事件多次执行

1.html代码 <input type="button" value="add"> <input type="button" value="save"> 2.js代码 $("#add").click(function(){ alert("add"); $("#save").click(function(){ alert("save&

在 Visual Studio 生成项目时，会发现一些 dll 并没有被复制到输出目录，导致最终程序的执行错误

发现与解决检查了一下项目文件,发现是因为这些 dll 文件的引用其中一个叫做嵌入互操作类型(EmbedInteropTypes)的属性被设为了 True,此时复制本地属性会被强制设为 False.所以 dll 文件自然也就不会被复制到输出目录了. 所以只要将嵌入互操作类型设为 False 后,重新生成项目即可解决. 更多但是发现在引用这些 dll 文件时,并没有与其它正常 dll 有什么不同的地方. 网上大概搜索了一下,好像发现产生这种问题的,名字中都包含 Interop.,且应该

flexbox子盒子order属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .flex-container { display: flex; width: 400px; height: 400px; background-color: gray; } .flex-item

@touchstart 导致子盒子不执行click

热门专题