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标签绑定一个点击事件,这个事件是被动执行的.意思是要点击才会触发的 在 ...
随机推荐
- JS ----实现复制粘贴功能 (剪切板应用clipboardData)
注意:ie7,与ie8 对网页有个复制的权限,需在“安全”中的“自定义级别”的脚本中设置 clipboardData 对象 提供了对剪贴板的访问. 三个方法 :1.clearData(sDataFor ...
- mysql修改字段长度及pymysql.err.DataError: (1406, "Data too long for column 'name' at row 1")错误
文章链接:修改字段:https://blog.csdn.net/xiejunna/article/details/78580682 错误分析:https://blog.csdn.net/qq_4214 ...
- Poco::Crypto--加解密_RSA
Poco::Crypto--加解密(RSA) 1.简单的加解密 Cipher::Ptr pCipher = CipherFactory::defaultFactory().createCipher(R ...
- swift 实践- 02 -- 自定义cell 的简单使用
import UIKit class MyTableViewCell: UITableViewCell { var imageV: UIImageView? var titleLabel: UILab ...
- swift 学习- 14 -- 继承
// 一个类可以继承另一个 类的方法, 属性和其他特征, 当一个类继承其他类时, 继承类叫子类, 被继承类叫父类 或 (超类), 在 Swift 中, 继承是区分 [类] 和其他类型的 一个基本特征 ...
- sleep()和wait()的区别及wait方法的一点注意事项
一.查看API sleep是Thread类的方法,导致此线程暂停执行指定时间,给其他线程执行机会,但是依然保持着监控状态,过了指定时间会自动恢复,调用sleep方法不会释放锁对象. 当调用sleep方 ...
- Confluence 6 配置一个数据源连接
这个指南指导你如何配置使用 JNDI 数据源来连接到你的数据库.使用这个类型的连接,Confluence 将会询问应用服务器(Tomcat)中你配置的连接信息. 如果你希望使用 JDBC 的数据库连接 ...
- nginx安装目录详解(针对centos)
- vue.js 入门学习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 使用pm2离线部署nodejs项目
1.下载https://npm.taobao.org/mirrors/node/v8.11.1/node-v8.11.1-linux-x64.tar.xz 比如安装到/opt目录 xz -d node ...