点击事件target
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的更多相关文章
- 从获取点击事件根元素谈 target和currentTarget
事情由来: 写了一个点击事件,想获取根元素,想的直接用current就行了,因为之前就是这么用的,但是之前的点击元素是没子元素的,current就是根元素,但是这次点击元素内部有子元素,current ...
- [转]iOS Safari 中click点击事件失效的解决办法
iOS Safari 中click点击事件失效的解决办法 问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素 ...
- ios h5 app avalon tap点击事件失效及点击延迟300ms问题解决方法
1.ios h5 app avalon tap事件失效 使用MUI制作app界面,使用avalon.js渲染数据,发现在(Android上正常)ios上运行时容器div的avalon的ms-on-ta ...
- 【Swift 2.1】为 UIView 添加点击事件和点击效果
前言 UIView 不像 UIButton 加了点击事件就会有点击效果,体验要差不少,这里分别通过自定义和扩展来实现类似 UIButton 的效果. 声明 欢迎转载,但请保留文章原始出处:) 博客园: ...
- iOS Safari 中click点击事件失效的解决办法
问题起因: 在微信公众号开发(微站)过程中用jquery的live方法绑定的click事件点击无效(不能执行) 问题描述 当使用委托给一个元素添加click事件时,如果事件是委托到 document ...
- jQuery触发a标签点击事件-为什么不跳转
今天开发发现 使用jQuery触发a标签的点击事件,当前的样式发生了变化,可是没有跳转,为什么? 百度后找到的解决方案: <a onclick="hanle()" href= ...
- js触发按钮点击事件
js触发按钮点击事件 博客分类: javascript 模拟JS触发按钮点击功能 <html> <head> <title>usually function&l ...
- Atitit vod click event design flow 视频点播系统点击事件文档
Atitit vod click event design flow 视频点播系统点击事件文档 重构规划1 Click cate1 Click mov4 重构规划 事件注册,与事件分发管理器分开 ...
- CSS实现点击事件及实践
实现原理利用:target,把a标签自身的href以及id设置成一样的. 案例1:实现元素的切换 HTML: <div id="box"> <a href=&qu ...
随机推荐
- python学习之数组二
作用于数组的函数: 通用函数:函数基于元素的,以单元方式作用于数组的,返回的是与原数组具有相同形状的数组. 不通用函数(数组函数):函数能以行或者列的方式作用于整个矩阵:如果没有提供任何参数时,它们将 ...
- K8S的网络接口CNI及灵雀云的实践
K8S的网络模型 我们从底层网络来看,分为三个层面.首先是Pod之间的多个容器的网络互通.我们知道,K8S的Pod可以由多个容器组成,这个层面网络互通是比较简单的,因为所有的容器都是共享一个网卡,可以 ...
- CentOS 7 源码编译vim8+vimplus
安装依赖包 [root@DaMoWang ~]# yum -y install git \ centos-release-scl \ gcc-c++ \ ncurses-devel \ python- ...
- CentOS 7 DR模式LVS搭建
调度器LB : 192.168.94.11 真实web服务器1 : 192.168.94.22 真实web服务器2 : 192.168.94.33 VIP : 192.168.94.111 脚本如下 ...
- sql语句中 “where 1=1” 的用处
通过拼凑sql语句,加入若干个where限制条件,如:select * from table "where conditionA" + ”and conditionB“ + ”an ...
- FangDD Java编程规范
我们采用<Oracle/Sun原生的Java编程规范>和<Google Java编程规范> Google Java编程风格指南 January 20, 2014 作者:Haws ...
- mybatis中的foreach方法
select t.service_id, t.prod_id, t.prod_name, t.prod_type, t.buss_type, t.pricing_fee, t.detail from ...
- C/C++ strict-aliasing
最近发现了一个奇怪的编译参数-fno-strict-aliasing,好奇之下做了一点研究: 重点参考Understanding C/C++ Strict Aliasing: 所谓的aliasing就 ...
- js 星星效果思路
//星星的效果思路 1.获取需要修改的元素 ul li 跟p 布局 2.给li 加移入事件 更改提示框显示, 3.给li 加移出事件 更改提示框隐藏 4.给li加索引值代表自己的序号 5.在li移入时 ...
- 剑指offer(9)变态跳台阶
题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级……它也可以跳上n级.求该青蛙跳上一个n级的台阶总共有多少种跳法. 题目分析 根据上一个题目可以知道,青蛙只跳1或2可以得出是一个斐波那契问题,即 ...