1、场景:需要写一个弹出框来容纳登录界面,类似于百度的登录框

   问题:使用  display: none/block  进行弹出框的显示和隐藏,设立点击事件   onclick  进行触发,但是点击过后目标框闪烁了一下就消失        了

  解决:在调用函数后加上 "return: false;"  即可解决。看图 ↓

  如果还没解决,看看你是否给需要显示的元素包裹了父元素!

2、场景:一个按钮或者链接上方覆盖了另一层元素,导致下层按钮无法被点击

   解决:首先会先到 z-index 来解决,但是z-index 有时候并不好使,我们还有更简单的做法  pointer-events: none;

   将某个元素 pointer-events的值设置为 none ,那么该元素将不会捕获任何click事件,即不会成为鼠标事件的target。而是让事件穿过该元素到达下面的元素!即可解决上述问题。pointer-events的值只有两个我们能用到 即 auto(默认) 、none 。其他值只能用在SVG上,因为人家本来就是SVG的属性啊。看图

3、场景:设置一个按钮或者span等元素添加点击事件,频繁点击会出现蓝色背景,看图

  解决:1、 JS方法  document.onselectstart=new Function("return false");

     2、CSS方法body{} 添加以下代码:

    -webkit-user-select:none; 
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;

点击事件target的更多相关文章

  1. 从获取点击事件根元素谈 target和currentTarget

    事情由来: 写了一个点击事件,想获取根元素,想的直接用current就行了,因为之前就是这么用的,但是之前的点击元素是没子元素的,current就是根元素,但是这次点击元素内部有子元素,current ...

  2. [转]iOS Safari 中click点击事件失效的解决办法

    iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...

  3. ios h5 app avalon tap点击事件失效及点击延迟300ms问题解决方法

    1.ios h5 app avalon tap事件失效 使用MUI制作app界面,使用avalon.js渲染数据,发现在(Android上正常)ios上运行时容器div的avalon的ms-on-ta ...

  4. 【Swift 2.1】为 UIView 添加点击事件和点击效果

    前言 UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果. 声明 欢迎转载,但请保留文章原始出处:) 博客园: ...

  5. iOS Safari 中click点击事件失效的解决办法

    问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document  ...

  6. jQuery触发a标签点击事件-为什么不跳转

    今天开发发现 使用jQuery触发a标签的点击事件,当前的样式发生了变化,可是没有跳转,为什么? 百度后找到的解决方案: <a onclick="hanle()" href= ...

  7. js触发按钮点击事件

    js触发按钮点击事件 博客分类: javascript   模拟JS触发按钮点击功能 <html> <head> <title>usually function&l ...

  8. Atitit vod click event design flow  视频点播系统点击事件文档

    Atitit vod click event design flow  视频点播系统点击事件文档 重构规划1 Click cate1 Click  mov4 重构规划 事件注册,与事件分发管理器分开 ...

  9. CSS实现点击事件及实践

    实现原理利用:target,把a标签自身的href以及id设置成一样的. 案例1:实现元素的切换 HTML: <div id="box"> <a href=&qu ...

随机推荐

  1. Java读取resource文件/路径的几种方式

    方式一: String fileName = this.getClass().getClassLoader().getResource("文件名").getPath();//获取文 ...

  2. ubuntu14安装mantis实践(包含LAMP/PHP)

    安装LAMP 参考 https://www.linuxidc.com/Linux/2016-12/138757.htm sudo add-apt-repository ppa:ondrej/apach ...

  3. 从Joda-Time反观Java语言利弊

    基本上每个企业应用系统都涉及到时间处理.我们知道,以前用java原生的Date+Calendar非常的不方便.后来Joda-Time诞生,这个专门处理日期/时间的库提供了DateTime类型,用它可以 ...

  4. [Android] TextView上同时显示图标和文字

    需求场景 +----------------------------+ | Icon TEXT | +----------------------------+ 当然,可以使用LineLayout,包 ...

  5. 以选项卡的故事扯扯js面向对象

    在现在的网页中,选项卡(我自己这样子叫)是非常普遍的,也是比较基础,学了原型实现选项卡也挺久了,最近在学ES6,学了用类实现选项卡,今天就在此做个总结,别的废话也不多说. 以"貌" ...

  6. centos7使用yum安装软件提示 cannot find a valid baseurl for repo:base/7/x86_64 的解决方法

    由于是本地yum源安装软件,无法联网,因此使用yum安装软件时报了错,解决方法是: 打开vi /etc/resolv.conf文件 新增内容如下: nameserver 8.8.8.8 nameser ...

  7. ARM-ili9325屏调试1--时序

    2011-06-21 22:04:54 LCD连接好了,读id,不成功.说明配置引脚或读写时序不对. 原来是软件引脚配置出错. 应该用如下. #define LCD_CS   {3<<30 ...

  8. 和 (DFS)

    和 Time Limit: 1000MS Memory Limit: 65536KB Total Submissions: 177 Accepted: 93 Share Description:   ...

  9. Docker Kubernetes 创建管理 Deployment

    Docker Kubernetes YAML文件创建容器 通过创建Deployment来管理pods从而创建容器.它会同时创建容器.pod.以及Deployment ! 环境: 系统:Centos 7 ...

  10. Python 协程了解

    协程: 1.协程,又称微线程,纤程.英文名Coroutine. 2.协程是跑在线程内的单线程,串行没有锁. 3.协程是一种用户态的轻量级线程. 4.协程CPU是访问不到的,协程是用户自己控制的.   ...