(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】点击按钮-去高亮-加点击效果的更多相关文章

  1. iOS扩大UIButton按钮的可点击区域

    一.开发中遇到的问题 我们在开发时有时遇到这中情况:UI给的图片很小,button的点击区域要求比较大.如果用 setBackgroundImage: 方式设置图片会导致图片也跟着button的fra ...

  2. vue自己写了一个div菜单,点击按钮展开,点击其他地方关闭这个div菜单

    需求是通过点击body页面,在其他地方就关闭这个<div>菜单,给这个div一个id:problemList,但是点击我打开的按钮,不关闭. created () { document.o ...

  3. 家庭记账本app进度之关于单选按钮的相关操作(添加点击按钮事件以及点击单选更改事件)

    这次主要是通过代码实现了android中的相关单选按钮的相关操作,之后再最下面有一个按钮,当点击这个按钮的时候,会获取当上面的相关信息,之后再下方会进行相应的文字显示,获取的信息不同显示的信息也不会一 ...

  4. iOS开发 点击跳转到App Store 或者 点击按钮去评价

    //跳转到应用页面 NSString *str = [NSString stringWithFormat:@"http://itunes.apple.com/us/app/id%d" ...

  5. iOS 增加UIButton按钮的可点击区域

    在很多时候,按钮可能看起来那么大,但是在它周围进行点击时,都能够触发事件,是因为它的可点击区域比我们看到的button要大. 在使用AutoLayout的时候,我们处理的是按钮的image属性,所以这 ...

  6. jq 点击按钮显示div,点击页面其他任何地方隐藏div

    css .bl_rencai_32{ float: left; height: 35px; line-height: 35px; } .bl_rencai_32 >input{ width: 3 ...

  7. vue 点击按钮弹窗,点击关闭按钮关闭弹窗。

    <div @click="btnfc()">点击弹窗按钮</div> <div v-show="show"> <div ...

  8. jQuery第三课 点击按钮 弹出层div效果

    jQuery 事件方法 事件方法会触发匹配元素的事件,或将函数绑定到所有匹配元素的某个事件. 触发实例: $("button#demo").click() 上面的例子将触发 id= ...

  9. javascript 点击按钮实现隐藏显示切换效果

    原文链接:http://www.jb51.net/article/79083.htm <html> <head> <meta charset="gb2312&q ...

  10. ios禁用多按钮同时点下的效果

    只需要把那些不能同时点下的按钮或者视图设置一下即可. [view setExclusiveTouch:YES]; 避免view上多个button同时按下,则可设置每个button的setExclusi ...

随机推荐

  1. 集合框架-day10

    day10-集合框架-对象数组的概述与引用 1 集合框架的简单介绍: A:集合的由来 数组长度是固定,当添加的元素超过了数组的长度时需要对数组重新定义,太麻烦,java内部给我们提供了集合类,能存储任 ...

  2. Redis(二):单机数据库的实现

    概要 本部分内容主要是研究单机数据库.分别介绍单机数据库的实现原理,数据库的持久化,Redis事件,服务器维护管理客户端以及单机服务器的运作机制. 数据库 数据库结构 Redis数据库由redis.h ...

  3. Shiro踩坑记(一):关于shiro-spring-boot-web-starter自动注解无法注入authorizer的问题

    一)问题描述: 我在一个Spring的项目中使用shiro搭建权限控制框架.主要通过shiro-spring-boot-web-starter包快速集成Shiro.但是项目无法启动,报没有author ...

  4. Spring绑定请求参数过程以及使用@InitBinder来注册自己的属性处理器

    在工作中,经常会出现前台的请求参数由于无法被正常转型,导致请求无法进到后台的问题. 比如,我有一个User.其性别的属性被定义成了枚举,如下: public enum Gender { MALE(&q ...

  5. Linux下实现文件共享配置[samba]

    Linux下实现文件共享配置[samba] 第一步:安装samba软件 1.命令:rpm –q samba #查询是否已安装sambayum install samba #使用yum源安装samba, ...

  6. Docker PHP7官方镜像安装Redies扩展

    2019独角兽企业重金招聘Python工程师标准>>> 直接RUN docker-php-ext-install redis 失败,google得到: ENV PHPREDIS_VE ...

  7. 外媒评Mate 10 Pro:智慧拍照惊人,续航能力卓越

    说到近期的热门机型,华为Mate 10 Pro绝对算是被人们谈论最多的一个,其可以算是首款搭载移动AI芯片的顶级旗舰机型,而且AI技术在这部手机上拥有多项实际的应用,带来的体验非传统智能手机可比. 由 ...

  8. 两种方法直接删除数组中特定值的项(JavaScript)

    一.问题详情: 直接删除意为原数组需要被改变,而不是得到另一个数组. 二.JavaScript实现 (一)巧用数组的push( ).shift( )方法 function del(arr,num) { ...

  9. localStorage和cookie的跨域解决方案

    原文转自:点我 前言 localStorage和cookie大家都用过,我前面也有文章介绍过,跨域大家也都了解,我前面也有文章详细描述过.但是localStorage和cookie的跨域问题,好多小伙 ...

  10. 多线程高并发编程(7) -- Future源码分析

    一.概念 A Future计算的结果. 提供方法来检查计算是否完成,等待其完成,并检索计算结果. 结果只能在计算完成后使用方法get进行检索,如有必要,阻塞,直到准备就绪. 取消由cancel方法执行 ...