记两个ios的bug：日期问题和奇葩的vue 点击无响应问题

最新推荐文章于 2022-11-28 12:21:48 发布

十方魔

最新推荐文章于 2022-11-28 12:21:48 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端框架/Vue 前端/Javascript 文章标签： IOS 兼容性 new Date moment vue

本文链接：https://blog.youkuaiyun.com/github_36487770/article/details/82465741

本文记录了在iOS设备上遇到的两个技术问题：一是使用`new Date()`创建日期对象时遇到的格式不兼容问题，解决办法是替换日期字符串中的特殊字符；二是Vue中`@click`事件在iOS上经常无响应，尤其是当点击元素包含图片时，尝试了多种解决方案无效，最终通过将图片改为背景图片解决了问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

new Date()– invalid Date
vue @click 点击经常无响应

new Date()– invalid Date

ios 不认’2018-12-12’的’-‘, 也不认日期与事件之间的空格，需要在字符串用new Date()转化为日期时，replace一下

const dateString = '2010-11-29 11:11:11'
const date = new Date(dateString.replace(/-/g, '/').replace(/\s/, 'T'))

参考:
IOS Javascript Date的坑
 IOS/Safari中的new Date()的格式化坑

vue @click 点击经常无响应

这是一个奇葩的bug。具体表现为，一个span 中包含了一个img, @click 绑定在span 上。没有

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

十方魔

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

项目难点：解决IOS调起软键盘之后页面样式布局错乱问题

Mr.小灰狼_随笔

08-15

2998

项目难点：解决IOS调用起软键盘之后页面样式布局错乱问题

h5调用android录音,GitHub - LairLiu/Recorder: html5 js 录音 mp3 wav ogg webm amr 格式，支持pc和Android、ios部分浏览器、和...

weixin_39902870的博客

05-28

1453

????Recorder用于html5录音在线测试，支持大部分已实现getUserMedia的移动端、PC端浏览器；主要包括：Chrome、Firefox、Safari、Android WebView、腾讯Android X5内核(QQ、微信)；不支持：UC系内核(典型的支付宝，大部分国产手机厂商的浏览器)，IOS上除Safari外的其他任何形式的浏览器(含PWA、WebClip、任何App内网页)。...

2 条评论您还未登录，请先登录后发表或查看评论

快速解决vue在ios端下点击响应延时的问题

12-01

在apicloud开发中遇到的问题：用vue.js的点击事件，安卓点击响应迅速而ios点击响应有延时（大约300ms）. 解决方案如下：引入[removed][removed] 然后在页面加载时，使用 $(function() { FastClick.attach(document.body); }); 以上这篇快速解决vue在ios端下点击响应延时的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持软件开发网。

vue刷新当前页面android可以但ios无反应（微信浏览器）

weixin_46104490的博客

11-28

916

vue出现了ios无相应的情况，在网上找到了两种解决方案，欢迎大家补充。

Vue点击事件失效

weixin_41219240的博客

10-26

1万+

在做项目时给button添加click事件，发现没反应，但另外写了一个button添加同样的事件，却能触发。原因是使用了better-scroll，默认它会阻止touch事件。所以在配置中需要加上click: true 例： mounted(){ this.scroll=new Bscroll(this.$refs.wrapper, { mouseWheel: true, click: ...

ios闪屏问题 vue_ios 点击失效、闪屏问题解决方案

weixin_39593498的博客

12-22

248

// 点击事件按钮$('body').on('click', '[data-event]', function(e) {var arr = $(this).data('event').match(/J_(\w+)Btn/);var selector = arr[1];switch (selector) {case 'storeHot':$targetElem = $targetElem.paren...

日期控件在ios端不兼容问题

sunshine的博客

03-04

3511

日期控件在Android端正常显示，但是在ios端确不兼容，如下图： ios端 Android端将日期转一下，如下操作即可： //date在苹果手机不兼容的bug，val...

微信公众号H5项目中用高德地图实现用户定位（vue）

优快云_zhhjgy的博客

01-11

2768

遇到的问题：用高德官网的方法去定位时发现，ios可以在http的网址定位，而安卓手机只能在https的网址定位，这个也是很奇葩，查了官网文档说，是因为浏览器禁止了非安全域的定位请求。但是我们的站点就是https的，总之就是定位不成功，但是没有解决不了的bug，最后成功定位的实现思路就是，利用公众号开发的api先拿到用户的地理位置，转化为高德的坐标，再添加一个marker来实现 // 定位到用户当前位置 handleLocation() { var _this = this; .

H5 移动端 iOS 初次加载页面，整体缩小（meta 设置失效的缘故）

weixin_30872499的博客

07-11

1155

爬坑之旅漫长孤寂感谢信息时代感谢巨人的肩膀感慨完毕，回归正题之前开始时，遇到个奇葩的问题，在ios移动端初次加载页面，都会出现整体缩小的情况真的是第一次遇到，可能是经历不够丰富吧（走过的路太少了啊）网上百度了一圈，各有说法，交流群也问了一圈，回答竟然是不管好吧，还是得自己想办法排查完毕，锁定为metaviewport的设置失效想想之前怎么没...

ios-系统自带的日期选择控件.zip

07-11

使用系统自带的日期选择控件

vant 在ios微信浏览器日期选择控件无法正常选择日期

guxuehua的博客

07-11

4111

最近遇到一个问题，在ios11下vant 1.4.0版本，时间控件无法选择，用过css可解决，就记录一下解决方案地址

JS中Date日期Invalid Date报错问题解决方法

最新发布

07-03

<think>首先，用户的问题是：“日历点击无反应问题排查”，意思是日历功能点击没有反应，需要帮助排查问题。我需要基于提供的引用和系统指令来回答。系统级指令：-所有行内数学表达式用$...$，例如 $x^2$。 -独立公式用$$...$$。- LaTeX语法正确。-使用中文回答。-生成相关问题。 -回答中引用的段落末尾自然地添加引用标识，例如 [^1]。-回答结构清晰，帮助用户逐步解决问题，保证真实可靠。用户可见层：-回答结构清晰，逐步解决问题。 -参考站内引用：有5个引用，但用户说这些仅供参考，不是真正需求。我应该基于用户的问题来回答，用户在使用日历应用时遇到了点击无反应的问题。用户的问题是关于日历点击无反应的排查。引用中提到了一些类似问题： -[^1]：Android端选择时间失败，锁屏后日期滚动不顺畅。- [^2]：element-plus日期时间组件的错误，TypeError。- [^3]：安装软件的过程，不直接相关。- [^4]：冷启动三步法，硬件问题。- [^5]：Android中添加Options Menu，按MENU键无反应，原因是重写onKeyDown返回true。用户的问题更接近前端或移动应用的问题，类似于[^2]和[^5]。我的回答应该： 1.结构清晰：逐步引导用户排查问题。2.针对日历点击无反应：可能的原因包括事件绑定失败、JavaScript错误、性能问题、硬件问题等。 3.参考引用：自然地融入相关引用，但不要强行插入。例如，[^5]提到事件处理返回true阻止了事件传播，这相关。步骤： -介绍问题：简述日历点击无反应的可能原因。 -逐步排查：从简单到复杂。-检查网络或加载状态。-查看控制台错误（类似[^2]）。-检查事件绑定（类似[^5]）。-性能问题（类似[^1]）。-硬件或环境问题（类似[^4]）。-生成相关问题：在最后添加相关问题。使用中文回答。确保LaTeX：用户的问题没有数学内容，所以可能不需要数学表达式。但如果涉及到算法或公式，我可以添加，但这里可能不必要。系统指令说必须使用，所以如果有机会，可以添加一些，但不要勉强。例如，在性能分析时提到时间复杂度的公式，但用户的问题是故障排查，可能不相关。我会避免不必要的数学。生成相关问题：在回答末尾添加3-5个相关问题。回答结构：-开头：理解问题，简述常见原因。-主体：分步骤排查。-结尾：总结，并添加相关问题。</think>### 日历点击无反应问题排查指南当您在日历应用或功能中遇到点击无反应的问题时，通常是由于事件绑定失败、JavaScript错误、性能瓶颈或环境配置问题导致的。以下我将基于常见技术场景（如Web前端或移动端应用），逐步引导您排查问题。排查过程从简单到复杂，优先检查软件层，再考虑硬件或系统层。请根据您的具体环境（如浏览器、Android或iOS应用）选择对应步骤。 #### 步骤1: 基础检查（排除简单干扰） - **刷新页面或重启应用**：临时性缓存或资源加载失败可能导致事件响应异常。关闭日历应用或页面后重新打开，观察问题是否消失。 - **检查网络和加载状态**：如果日历依赖网络数据（如在线日历），确保设备联网正常。加载延迟可能使点击事件被忽略。 - **测试其他功能**：点击日历的其他区域（如日期切换按钮），确认是否仅特定元素无响应，以判断是否局部事件绑定问题。 *示例：引用[^1]中提到锁屏后日期滚动异常，可能与资源加载中断相关。* #### 步骤2: 检查前端错误（适用于Web或混合应用） - **查看浏览器/开发者控制台**： - Web端：按 `F12` 打开开发者工具，切换到 `Console` 标签。点击日历时，观察是否有JavaScript错误（如 `TypeError` 或 `null` 引用）。 - 移动端：使用远程调试工具（如Chrome DevTools for Android）捕获错误日志。 - 常见错误：事件监听器未绑定、DOM元素未正确渲染或框架冲突（如React/Vue）。例如，引用[^2]中element-plus组件的 `TypeError: Cannot read properties of null` 错误，源于数据更新导致DOM异常。 - **修复建议**： - 确保日历组件初始化代码正确，无遗漏事件绑定（如 `addEventListener`）。 - 更新框架版本（如element-plus），或检查数据源是否包含空值（引用[^2]的解决思路）。 - **验证事件传播机制**： - 在代码中检查事件处理函数是否错误地阻止了事件冒泡（如 `event.stopPropagation()`）。 - 移动端：类似引用[^5]的案例，Android中重写 `onKeyDown` 返回 `true` 会阻止事件传递，导致点击无响应。确保事件处理返回 `false` 以允许默认行为。 *示例代码排查：* ```javascript // 错误示例：返回true阻止事件传播 element.addEventListener('click', (event) => { // 处理逻辑 return true; // 应改为false或省略 }); ``` #### 步骤3: 性能与资源问题排查 - **监控性能指标**： - 使用浏览器 `Performance` 标签或Android Profiler 记录点击操作。查找高延迟（如渲染阻塞或长任务），这可能导致事件队列堆积。 - 常见原因： - 内存泄漏（如未销毁的日历实例）。 - 锁屏后资源释放异常（引用[^1]中锁屏后日期滚动卡顿）。 - **优化建议**： - 减少日历组件的复杂度（如分页加载数据）。 - 确保异步操作（如API请求）正确处理错误，避免阻塞UI线程。 - **检查依赖和兼容性**： - 更新浏览器或应用：旧版本可能存在已知bug（引用[^2]通过更新element-plus修复）。 - 依赖冲突：确保第三方库（如日期选择器插件）与主框架兼容。运行 `npm ls` 或检查 `package.json` 版本冲突。 #### 步骤4: 系统与硬件层排查 - **系统环境检查**： - 权限问题：Android/iOS中确认应用有 `INTERNET` 或 `STORAGE` 权限（设置 > 应用管理）。 - 操作系统更新：安装最新系统补丁，修复底层事件驱动bug。 - **硬件诊断**： - 触摸屏故障：测试其他应用（如相机）的点击响应。 - 冷启动重置：类似引用[^4]的冷启动三步法，断开外设，强制重启设备，排除临时硬件错误。 *操作示例：关机后长按电源+音量键进入恢复模式，清除缓存分区。* #### 总结与建议如果以上步骤未解决问题，提供更多上下文（如错误日志、设备型号或代码片段）以便深入分析。多数情况下，事件绑定错误或框架冲突是主因（参考引用[^2][^5]）。优先从软件层入手，逐步排除硬件因素。

记两个ios的bug： 日期问题和奇葩的vue 点击无响应问题

new Date()– invalid Date

vue @click 点击经常无响应

记两个ios的bug：日期问题和奇葩的vue 点击无响应问题