点击事件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 ...
随机推荐
- 高并发架构系列:MQ消息队列的12点核心原理总结
消息队列已经逐渐成为分布式应用场景.内部通信.以及秒杀等高并发业务场景的核心手段,它具有低耦合.可靠投递.广播.流量控制.最终一致性 等一系列功能. 无论是 RabbitMQ.RocketMQ.Act ...
- poj3155 最大密度子图
求最大密度子图 记得在最后一次寻找的时候记得将进入的边放大那么一点点,这样有利于当每条边都满流的情况下会选择点 #include <iostream> #include <algor ...
- sitecore开发入门之Sitecore字典结构最佳实践
使用Sitecore时,一个重要的主题是如何为您的网站处理不同的语言和区域.Sitecore对此的回答是使用字典项,它基本上只代表键/值定义.但是,这个字典项可以设置为具有不同的语言版本,这几乎允许您 ...
- Hadoop -- 概念
hadoop 一个开源的,稳定的,可扩展的,分布式的计算框架 实现单一的服务器到成千上万机器之间共同处理数据的一个可扩展性框架 Hadoop 项目主要包含以下四个模块 Hadoop Common:为其 ...
- js不需要知道图片宽高的懒加载方法(经过实际测试,不加宽高仍然是无法正常加载的,设置height:auto,height:100%,仍然显示高度为0)
js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...
- java线程学习之线程创建
线程是程序控制的一个内部数据流.线程的状态转化如下 或者 在java中创建线程有两种方式: 1.实现runnable接口(这个比较好,推荐这个.原因是:用的时候比较灵活,相比较继承Thread类,用接 ...
- CSS 页面布局、后台管理示例
CSS 页面布局.后台管理示例 页面布局 1.头部菜单 2.中间内容/中间左侧菜单 3.底部内容 <div class='pg-header'> <div style='width: ...
- Python socket ssh接收大数据
通过socket连续接收返回数据 Server服务端 import socket,os server = socket.socket() server.bind(('localhost',9999)) ...
- DevOps的故事(如何整合开发和运维?)
在一个与我们平行的世界中,有一个软件开发公司.这个公司所做的产品用户量近期增长的十分迅猛,但是令CTO头疼的是公司的两大部门:开发部和运维部近期也是“掐”得厉害.为解决这个问题,CTO决定倒入现在十分 ...
- 程序员的快速开发框架:Github上 10 大优秀的开源后台控制面板
程序员的快速开发框架:Github上 10 大优秀的开源后台控制面板 Web 开发中几乎的平台都需要一个后台管理,但是从零开发一套后台控制面板并不容易,幸运的是有很多开源免费的后台控制面板可以给开发者 ...