JS元素意外点击元素消失
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding: 0}
a{ display: inline-block; width: 50px;height: 50px;background: #f40;margin: 50px 0 0 50px;}
div{margin: 60px 0 0 50px; padding: 20px;outline: none;border:1px solid #eee;border-radius: 5px;width: 200px;}
</style>
</head>
<body>
<a id="search">1111</a>
<div id="searchBox"></div>
<script type="text/javascript">
window.onload = function(){
var obj=document.getElementById("searchBox");
var oBtn=document.getElementById("search");
searchBox.style.display = "none";
oBtn.onclick=function(){
obj.style.display="block";
}
document.onclick=function(event){
//
var e=event || window.event;//兼容ie和非ie的event
var aim=e.srcElement || e.target; //兼容ie和非ie的事件源
//
if(e.srcElement){
var aim=e.srcElement;
if(aim!=oBtn && aim!=obj){
obj.style.display="none";
}
}else{
var aim=e.target;
if(aim!=oBtn && aim!=obj){
obj.style.display="none";
}
}
}
}
</script>
</body>
</html>
JS元素意外点击元素消失的更多相关文章
- 【笔记】js获取当前点击元素的索引
以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何 ...
- JS初学之-点击元素,当前的显示样式,其他变灰色
点击按钮或者其他元素,当前的变化,其他的不变(比如选项卡按钮,点击当前的变为黄色,其他的不变色),这样的情况我们有两种思路: 1.全部清空,当前添加 for(var i=0;i<aBtn.len ...
- js单击显示元素,点击元素本身以外隐藏元素
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js获取当前点击元素的索引
以ul下的li元素为例:获取li的索引,代码如下: <ul id="list"> <li></li> <li></li> ...
- 自动化测试中,元素无法点击定位等问题的解决:js的使用方法
在自动化测试中经常会遇到使用selenium方法定位元素点击操作失败的情况,例如,我们想实现在浏览器输入http://www.baidu.com,进入百度首页后,鼠标悬停在“更多产品”上,点击“全部产 ...
- JS 点击元素发ajax请求 打开一个新窗口
JS 点击元素发ajax请求 打开一个新窗口 经常在项目中会碰到这样的需求,点击某个元素后,需要发ajax请求,请求成功以后,开发需要把链接传给前端(或者说请求成功后打开新窗口),前端需要通过新窗口打 ...
- js中怎么为同级元素添加点击事件
事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好.元素添加事件是js语言中最基础的.我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子 ...
- js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性
js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性 <!doctype html> <html> <head> <meta char ...
- js怎么模拟点击网页元素
在测试页面中,引入jquery源文件,并添加一个div标签,一个a标签,为了演示效果a标签暂时不添加地址 通过jquery为div标签绑定一个点击事件,这个事件是被动执行的.意思是要点击才会触发的 在 ...
随机推荐
- zabbix3.0.4使用percona-monitoring-plugins插件来监控mysql5.6的详细实现过程
zabbix3.0.4使用percona-monitoring-plugins插件来监控mysql5.6的详细实现过程 因为Zabbix自带的MySQL监控没有提供可以直接使用的Key,所以一般不采用 ...
- jquery日常使用总结
1.如何跳出each循环 用 return false, 不是 break. $.each(resArray, function(j, n) { if (1 == n) { return false; ...
- char、nchar、varchar、nvarchar 的区别
char.varchar.nchar.nvarchar为数据库中常用的字符类型,使用上要综合考虑空间利用率与存取速度.它们的区别如下: 实例解析: 定义char[9].varchar[9].nchar ...
- List集合三种遍历方法
List<String> list = new ArrayList<String>();list.add("aaa");list.add("bbb ...
- Laravel 5.2数据库--多个关联关系,带条件约束的渴求式加载的问题
### 今天在连表获取数据的时候,老是获取不到想要的,确实有点无力适从的感觉. 归根到底,还是对laravel不够熟悉,至少是数据库操作那块. ### 问题是这样的: 我想要通过连表中间表,拿中间表的 ...
- [转]PhpStorm快捷键大全
1 前言 PhPStorm 是 JetBrains 公司开发的一款商业的 PHP 集成开发工具,PhpStorm可随时帮助用户对其编码进行调整,运行单元测试或者提供可视化debug功能.Phpstro ...
- 本地http://localhost打不开怎么办
本地http://localhost打不开怎么办 出自:http://jingyan.baidu.com/article/c45ad29cebb95a051753e2b6.html 学过计算机的都知道 ...
- SwipeRefreshLayout,用最少的代码定制最美的上下拉刷新样式
下拉刷新框架其实有很多,而且质量都比较高.但是在日常开发中,每一款产品都会有一套自己独特的一套刷新样式.相信有很多小伙伴在个性化定制中都或多或少的遇到过麻烦.今天我就给大家推荐一个在定制方面很出彩的一 ...
- Modbus库开发笔记之八:CRC循环冗余校验的研究与实现
谈到Modbus通讯自然免不了循环冗余校验(CRC),特别是在标准的串行RTU链路上是必不可少的.不仅如此在其他开发中,也经常要用到CRC 算法对各种数据进行校验.这样一来,我们就需要研究一下这个循环 ...
- Confluence 6 查看空间活动
空间活动信息是默认禁用(disabled by default)的.活动(Activity)的标没有显示,如果你的 Confluence Usage Stats 插件没有启用的.请查看下面的说明: ...