【IOS】点击按钮-去高亮-加点击效果
(1)前提:html页面 ,手机端,
(2)问题一:
在iphone上(貌似是9以后。。),给div/span/...等元素上加onclick事件,根本不起作用,这是为啥捏?
-- 在元素上加 cursor:pointer; 添加上后,系统会默认为这是一个可点击的元素。
|
1
|
cursor:pointer |
(3)问题二:
在做手机页面时候,(iphone和安卓上都会有这个问题),点击一个按钮时,会出现的大黑块,特别不好看,怎么去掉大黑块儿呢?
--在元素上添加 -webkit-tap-highlight-color属性后,就可以去掉默认的大黑块儿
|
1
|
-webkit-tap-highlight-color: transparent; |
(4)问题三:
当我们去掉默认的大黑块儿后,要添加自己想要的点击时按住按钮的效果,用以下代码:
|
1
2
3
4
|
span:active{box-shadow: inset 0 5px 10px #B41313,inset 0 -5px 10px #B41313;} |
添加完上述代码后,在安卓上,都可以看到想要的效果,但是iphone上依旧无动于衷。。。。。
怎么办?
经过查资料和实际测试后,发现,:active 需要一个触发事件才可以,于是乎,用以下代码:
|
1
2
3
4
|
<script type="text/javascript">document.body.addEventListener('touchstart', function () {});</script> |
在页面上给一个监听事件,就可以触发:active,就可以兼容iphone上点击按下时的效果了!!!
【IOS】点击按钮-去高亮-加点击效果的更多相关文章
- iOS扩大UIButton按钮的可点击区域
一.开发中遇到的问题 我们在开发时有时遇到这中情况:UI给的图片很小,button的点击区域要求比较大.如果用 setBackgroundImage: 方式设置图片会导致图片也跟着button的fra ...
- vue自己写了一个div菜单,点击按钮展开,点击其他地方关闭这个div菜单
需求是通过点击body页面,在其他地方就关闭这个<div>菜单,给这个div一个id:problemList,但是点击我打开的按钮,不关闭. created () { document.o ...
- 家庭记账本app进度之关于单选按钮的相关操作(添加点击按钮事件以及点击单选更改事件)
这次主要是通过代码实现了android中的相关单选按钮的相关操作,之后再最下面有一个按钮,当点击这个按钮的时候,会获取当上面的相关信息,之后再下方会进行相应的文字显示,获取的信息不同显示的信息也不会一 ...
- iOS开发 点击跳转到App Store 或者 点击按钮去评价
//跳转到应用页面 NSString *str = [NSString stringWithFormat:@"http://itunes.apple.com/us/app/id%d" ...
- iOS 增加UIButton按钮的可点击区域
在很多时候,按钮可能看起来那么大,但是在它周围进行点击时,都能够触发事件,是因为它的可点击区域比我们看到的button要大. 在使用AutoLayout的时候,我们处理的是按钮的image属性,所以这 ...
- jq 点击按钮显示div,点击页面其他任何地方隐藏div
css .bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ width: 3 ...
- vue 点击按钮弹窗,点击关闭按钮关闭弹窗。
<div @click="btnfc()">点击弹窗按钮</div> <div v-show="show"> <div ...
- jQuery第三课 点击按钮 弹出层div效果
jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...
- javascript 点击按钮实现隐藏显示切换效果
原文链接:http://www.jb51.net/article/79083.htm <html> <head> <meta charset="gb2312&q ...
- ios禁用多按钮同时点下的效果
只需要把那些不能同时点下的按钮或者视图设置一下即可. [view setExclusiveTouch:YES]; 避免view上多个button同时按下,则可设置每个button的setExclusi ...
随机推荐
- (附音视频、PPT地址)《打开Python这扇窗》分享总结
0.导读 2016年最新开发语言排行榜中,Python已经跃居第三,仅次于C.JAVA.掌握Python已经成为时下运维圈的共识,更让人期待的是,本次公开课分享的嘉宾自身就长期专注Python.Doc ...
- Xftp的下载安装,以及如何使用XFtp连接虚拟主机/服务器
1.下载ftp软件 下载地址: 点我立即下载 2.下载后双击安装 下一步 选择Free for Home/School 然后其他的默认下一步即可 3.打开之前领取的免费一年虚拟主机的网址,登 ...
- ELK收集日志到mysql数据库
场景需求 在使用ELK对日志进行收集的时候,如果需要对数据进行存档,可以考虑使用数据库的方式.为了便于查询,可以同时写一份数据到Elasticsearch 中. 环境准备 CentOS7系统: 192 ...
- GPTL—练习集—006树的遍历
#include<bits/stdc++.h> using namespace std; typedef int daTp;//datatype typedef struct BTNode ...
- python-os.rmdir与shutil.rmtree的区别和用法
每次写脚本的时候,pycharm都会自动生成缓存文件__pycache__文件,在提交代码的时候还得挨个删除,于是自己写一小段代码自动循环删除此目录及下面的文件. 思路: 先将目录及其下的文件读取出来 ...
- 【Hexo】使用Hexo+github pages+travis ci 实现自动化部署
目录 一.说明 二.成品展示 三.前期准备 本地安装 node.js 本地安装 git github 账号 创建仓库 travis ci 账号 四.安装 Hexo 五.使用 hexo 搭建博客 六.部 ...
- Vue实现靠边悬浮球(PC端)
我想把退出登录的按钮做成一个悬浮球的样子,带动画的那种. 实现是这个样子: 手边没有球形图.随便找一个,功能这里演示的为单机悬浮球注销登录 嗯,具体代码: <div :class="[ ...
- 201771030129-张琳 实验一软件工程准备—<阅读书之后的三个疑问>
项目 内容 课程班级博客链接 https://edu.cnblogs.com/campus/xbsf/nwnu2020SE/ 本次作业要求链接 https://www.cnblogs.com/nwnu ...
- LFU C# 实现
周六早上 做了下力扣的LRU 题目 后面接着看了LFU 缓存 难度提高了不少 首先 先说下 这2着 的差别把 LRU :最近 最少使用算法(Least Recently Used).LRU 是 ...
- Java中Error和Exception的异同以及运行时异常(Runtime exception)与检查型异常(checked exception)的区别
一:Error和Exception的基本概念: 首先Exception和Error都是继承于Throwable 类,在 Java 中只有 Throwable 类型的实例才可以被抛出(throw)或者捕 ...