移动端点击失效

最新推荐文章于 2024-01-16 11:15:50 发布
最新推荐文章于 2024-01-16 11:15:50 发布
阅读量397 收藏
点赞数
分类专栏： js 难点 css 文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/zxp_smile/article/details/121320555
版权

可能是没有加：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

H5移动端点击事件穿透问题解决
拥抱AI Design
08-03 9751
最近有遇到前端事件点击穿透的问题，拿来跟大家分享一下。 1.问题描述： 情景一：蒙层点击穿透问题，点击蒙层（mask）上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件。 情景二：跨页面点击穿透问题：如果按钮下面恰好是一个有href属性的a标签，那么页面就会发生跳转。 情景三：另一种跨页面点击穿透问题：这次没有mask了，直接点击页内按钮跳转至新页，然后发现新页面中对应...
vue移动端项目在IOS上点击输入框失效， 需要点击多次
GUOQIPING_的博客
06-09 884
1. 近期发现项目中关于输入框在ios上点击失效，多次点击才可以获取焦点的问题，那么导致这个问题所在的原因是因为项目中引入了FastClick 这个是解决移动端延迟300毫秒的优化 2.当使用FastClick 时，输入框在ios上点击输入调取手机自带输入键盘不灵敏，有时候甚至点不出来。而安卓上完全没问题。这个原因是因为FastClick的点击穿透。解决方法如下： FastClick.prototype.focus = function (targetElement) { let length; i
移动端click失效的问题
听闻青春丶
01-05 6047
解决办法有 5种可供选择： ​1、将 click 事件直接绑定到目标​元素（​​即 .target）上 2、将目标​元素换成 a 或者 button 等可点击的​元素 ​3、将 click 事件委托到​​​​​非 document 或 body 的​​父级元素上 ​4、给​目标元素加一条样式规则 cursor: pointer; ​5、 $.each($(".pt_ARL_box_aside...
移动端ios系统click事件失效
小考拉的博客
10-07 1208
移动端写click事件的时候，发现有时候会在ios失效，点击没有反应。 解决方案：把需要写click事件的部分，元素改成a或者button，然后绑定click事件
移动端html标签点击事件onclick失效问题解决
热门推荐
Ango的博客
02-14 1万+
今天测试突然提了这个bug，移动端onclick事件点击失效问题，网上找了好多方法，都是解决在js中绑定点击事件的问题 在js中绑定点击事件用click是兼容的 &lt;div id="test"&gt;click&lt;/div&gt;` &lt;script&gt; var fun = () =&gt; { console.log(Math.random()); } docu...
android中绑定点击事件不生效_Android 与 js 简单互调
weixin_29770269的博客
02-03 443
总结：Android 调用 js:在 Android 中创建通往 javascript 的接口;在 html 中定义要执行的方法;在 Android 中的具体事件中进行调用。contentWebView.loadUrl("javascript:javacalljs()"); js中调用Android 方法 :html中调用 Android 方法则反来，在 Andorid 中定义要调用的方法， ht...
移动端 解决点击按钮闪和active失效的问题
miniwater的博客
10-30 2181
在我最开始接触移动端这块的时候，遇到的第一个问题是要让用户感觉自己点了该按钮，即需要做一个按钮点下有反应的效果，一般都是用:active来实现的（:active是设置点击那一下的效果），但是在移动端，特别指iPhone，对这个伪类是失效的，后来查询了很多，知道了一个解决方法，就是对想要使用active这个效果的元素或者整个body绑定一个空的监听函数。即document.body.addEvent
echarts移动端双击事件失效问题解决
miracle_mf的博客
12-20 3300
笔者在开发中遇到问题：echarts 版本为4.9.0版本，H5项目中绑定双击事件不生效（dblclick绑定不触发）。但是单击事件没问题，因工作任务紧，echarts版本也不能随意变更（其他模块也在用此特定版本），查找原因无果，所以先用了一个笨办法解决：单击模拟实现双击事件。 代码如下： let g_clickTime = null; let g_TimeFn = null; let g_onItemName = ''; myChart.on('click', function (params) { .
uniapp echarts 解决点击失效问题
m0_56069088的博客
01-16 1900
解决echarts在uniapp中点击事件失效问题
解决 - vue移动端项目在IOS上点击输入框失效， 需要点击多次
sunshime的博客
07-19 1105
  近期发现项目中关于输入框在ios上点击失效，多次点击才可以获取焦点的问题， 一、导致这个问题发生的原因 &emsp;&emsp;是因为我在这个项目种使用了 FastClick ，它的作用是解决移动端延迟300毫秒的问题。   当使用FastClick 时，在ios上点击输入框，调取手机自带输入键盘不灵敏，有时候甚至点不出来。而安卓上完全没问题。这个原因是因为FastClick的点击穿透。 二、解决方法   修改一下 FastClick 的使用代码，如下： FastClick.proto
关于移动端点击无效的一些经验
weixin_30340775的博客
10-09 334
　　这两天在做一个WAP页面，在chrome上模拟移动端的时候，都好好的，然而放到手机上测试时， 发现有些点击事件直接无反应，但是有些有反应； 　　本小白在想，难道是由于我页面上有用到滚动插件，里面的touch事件的preventDefault导致click失效？ 于是，换成了touchSart事件试了下，效果比之前略好，但是，有重复点击事件，本小白排查了一会儿， 发现页面上明明在滚动区域...
document.onclick在ios上不触发的解决方法与touchstart点击穿透处理
weixin_46020146的博客
04-21 347
document.onclick在ios上不触发的解决方法与touchstart点击穿透处理
html手机端页面最下面按钮,移动端因软键盘的原因，固定在页面底部的按钮被弹起解决方案...
weixin_29938119的博客
06-03 579
搜索热词问题描述：移动端，当需要输入内容时，软键盘弹出往往会导致固定在底部的按钮、导航栏等被弹起，如图：图片描述" title="">解决思路： 当键盘弹起时隐藏掉按钮，键盘隐藏时按钮显示监测键盘是否弹起(浏览器页面是否发生变化) 底部按钮 <div class="returnbtn" v-show="isOriginHei" :class="{active: canSubmi...
手机(移动端)点击事件失效问题(微信？使用iscroll？)
宋坚强大大~~
10-10 1万+
1.问题重现： 微信ios内置浏览器认为，不是button  a标签之外的非点击元素  比如div  是不可点击的，比如给div绑了click事件   在微信里边是不生效的，解决办法是给这个div元素添加一个样式属性cursor: pointer;  那么我今天遇到的问题当然没有这么简单。  2.弹框中某个区域内内容很多，我们希望使用overflow：scroll；当超过之后，可以滚动查...
Vue移动端点击事件失效Bug解决
jk54546的博客
08-27 6047
问题复现： 为div添加click点击事件，但是点击无效。只有在点击图标处才可跳转。 <div class="tab_row" @click="toDetail(value)"> <i class="icon-addr"></i> <span>{{value.address}}</span> </div> 问题解决思路： 刚开始以为是图层遮挡，将文字区域遮挡导致点击无效，搜索后网上有的帖子说： 在遮挡层加： st
手机端html返回顶部,移动端H5页面返回顶部按钮无效问题的解决
weixin_35408656的博客
06-15 1172
一直都是在PC端写返回顶部的按钮，今天的项目是移动端，页面内容比较多，也有滚动顶部的功能，于是一开始用了原生的的写法，没有用，经过调试，滚动时获取不到滚动的高度。接着又换了一个gototop.js插件，还是无效，同样获取不到距顶部的高度。用了2个小时调试了这个移动端返回顶部的按钮事件，最后经调试发现是$(window).scroll()和$(window).scrollTop()高度不变，但是 $...
vue移动端H5页面点击事件在部分安卓手机上失灵
牛马日常踩坑记录
10-25 2264
在一些场景下，为了提高用户体验，开发者会选择使用@touchend事件来代替@click事件，例如在移动端设备上进行滑动操作时，@touchend可以更好地处理滑动过程中的各种交互效果。之前开发了一个H5页面，模仿爱奇艺视频APP的我的频道，点击当前频道进行移除或者添加，开始使用的是@click事件，但是上线以后发现部分安卓手机比如荣耀系列的，点击屏幕上的按钮，事件触发不灵光，点好多次才触发一次。在移动端设备上，由于移动设备的屏幕尺寸较小，点击屏幕上的元素会更加精准，因此@click事件被广泛使用。
vue踩坑之H5页面在ios的webview里面，长时间放到后台按钮失灵
weixin_45630548的博客
03-03 1295
在ios上应用切到后台后，再次进入会因为加载打包后的某些文件加载失败导致页面中的跳转按钮失灵
移动端常见问题及解决方案
hardgirls的博客
06-20 9304
移动端常见问题及解决方案 转载来源：益享天开 >> 手机移动端web前端常见问题整理 一、meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 meta name="viewport" content="width=device-width,i
echarts tootip 移动端
最新发布
03-26
### ECharts Tooltip 移动端适配及优化方案 #### 一、Tooltip 超出屏幕的解决方案 当在移动端展示柱状图或条形图时，如果图表中的某个数据项靠近屏幕边缘，则其对应的 `tooltip` 可能会超出可视区域。这种情况下可以通过调整 `tooltip.position` 属性来动态设置提示框的位置。 核心思路是通过自定义函数计算 `tooltip` 的位置，使其始终位于可见范围内： ```javascript option = { tooltip: { trigger: &#39;axis&#39;, position: function (point, params, dom, rect, size) { let viewWidth = size.viewSize[0]; let tipWidth = size.contentSize[0]; // 如果tip宽度超过视口右侧边界则左移 if (point[0] + tipWidth > viewWidth) { return [point[0] - tipWidth, point[1]]; } return [point[0], point[1]]; }, formatter: &#39;{a} <br/>{b}: {c}&#39; }, xAxis: { type: &#39;category&#39;, data: [&#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;, &#39;Sat&#39;, &#39;Sun&#39;] }, yAxis: { type: &#39;value&#39; }, series: [{ name: &#39;Series Name&#39;, type: &#39;bar&#39;, data: [120, 200, 150, 80, 70, 110, 130] }] }; ``` 上述代码中，`position` 函数用于判断当前 `tooltip` 是否越界并重新定位[^1]。 --- #### 二、解决移动端触摸事件无法触发 `tooltip` 在某些场景下，移动端可能因为手势识别或其他原因导致 `tooltip` 提示框无法正常显示。此时可以手动监听触控事件并通过 API 显式调用 `dispatchAction` 方法更新提示框状态。 以下是实现方式的核心逻辑： ```javascript // 绑定点击事件处理程序 document.getElementById(&#39;chart-container&#39;).addEventListener(&#39;touchstart&#39;, function (event) { const touch = event.touches[0]; const x = touch.pageX; const y = touch.pageY; // 获取鼠标相对于图表容器的实际坐标 const chartOffsetTop = document.getElementById(&#39;chart-container&#39;).offsetTop; const relativeY = y - chartOffsetTop; // 将像素坐标转换为数据索引 const dataIndex = myChart.convertFromPixel({ seriesIndex: 0 }, [x, relativeY])[0]; // 更新tooltip到指定的数据点 myChart.dispatchAction({ type: &#39;showTip&#39;, seriesIndex: 0, dataIndex: dataIndex }); }); ``` 此方法能够有效应对部分设备上默认交互机制失效的情况[^2]。 --- #### 三、整体响应式设计与性能优化建议 为了进一步提升用户体验，在移动端应用 ECharts 还需注意以下几个方面： 1. **自动缩放配置** 使用 `grid` 和其他布局属性使图表适应不同分辨率下的屏幕尺寸。 ```javascript option = { grid: { left: &#39;10%&#39;, right: &#39;10%&#39;, bottom: &#39;15%&#39;, containLabel: true } }; ``` 2. **减少冗余动画效果** 对于低性能设备而言，复杂的过渡动画可能会引起卡顿现象。因此推荐关闭不必要的视觉特效： ```javascript option = { animationDurationUpdate: 0, animationEasingUpdate: &#39;quinticInOut&#39; }; ``` 3. **按需加载模块** 避免一次性引入全部功能插件，仅保留实际需要用到的部分以降低文件体积和解析时间。 4. **字体大小调节** 根据窗口比例动态修改文字样式参数，确保信息清晰可读而不至于占据过多空间。 以上措施均有助于改善移动环境下的渲染效率以及操作流畅度[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值