<!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元素意外点击元素消失的更多相关文章

  1. 【笔记】js获取当前点击元素的索引

    以前用jq 做过图片切换 滑动之类的特效现在想用js 试试是怎么一回事 jq图片切换的思路是用index()函数获取当前点击的按钮的索引然后根据索引值将对应索引的图片显示出来 于是查了一下js 是如何 ...

  2. JS初学之-点击元素，当前的显示样式，其他变灰色

    点击按钮或者其他元素,当前的变化,其他的不变(比如选项卡按钮,点击当前的变为黄色,其他的不变色),这样的情况我们有两种思路: 1.全部清空,当前添加 for(var i=0;i<aBtn.len ...

  3. js单击显示元素，点击元素本身以外隐藏元素

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js获取当前点击元素的索引

    以ul下的li元素为例:获取li的索引,代码如下: <ul id="list"> <li></li> <li></li> ...

  5. 自动化测试中，元素无法点击定位等问题的解决：js的使用方法

    在自动化测试中经常会遇到使用selenium方法定位元素点击操作失败的情况,例如,我们想实现在浏览器输入http://www.baidu.com,进入百度首页后,鼠标悬停在“更多产品”上,点击“全部产 ...

  6. JS 点击元素发ajax请求 打开一个新窗口

    JS 点击元素发ajax请求 打开一个新窗口 经常在项目中会碰到这样的需求,点击某个元素后,需要发ajax请求,请求成功以后,开发需要把链接传给前端(或者说请求成功后打开新窗口),前端需要通过新窗口打 ...

  7. js中怎么为同级元素添加点击事件

    事件件是javascript脚本语言的重要组成部分,因为有事件才使用户页面的体验更加的美好.元素添加事件是js语言中最基础的.我们可以为元素本身添加事件,也可以通过事件绑定和事件监听为元素的父元素和子 ...

  8. js：for循环ul/li，获取当前被点击元素的id，以及给其他li设置属性

    js:for循环ul/li,获取当前被点击元素的id,以及给其他li设置属性 <!doctype html> <html> <head> <meta char ...

  9. js怎么模拟点击网页元素

    在测试页面中,引入jquery源文件,并添加一个div标签,一个a标签,为了演示效果a标签暂时不添加地址 通过jquery为div标签绑定一个点击事件,这个事件是被动执行的.意思是要点击才会触发的 在 ...

随机推荐

  1. Freemaker：操作集合

    <#if (id?index_of('Base') >= 0)> <choose> <when test="rootOrgID !=null and ro ...

  2. win10:家庭版开启组策略

    1.新建一个txt文件 2.复制以下内容到txt文件 @echo off pushd "%~dp0" dir /b C:\Windows\servicing\Packages\Mi ...

  3. php正则替换函数-----preg_replace ( mixed $pattern , mixed $replacement , mixed $subject [, int $limit = -1 [, int &$count ]] )

    preg_replace — 执行一个正则表达式的搜索和替换 说明 mixed preg_replace ( mixed $pattern , mixed $replacement , mixed $ ...

  4. [转]MingGW64 多个版本区别(silj, seh)

    1 引言 在https://sourceforge.net/projects/mingw-w64上会看到MinGW有各种版本如下,但区别在于哪儿呢 MinGW-W64 GCC-8.1.0 x86_64 ...

  5. winform的水印TextBox

    public partial class WaterTextBox : TextBox { private readonly Label lblwaterText = new Label(); pub ...

  6. winform中textbox提示框

    在winform中向textbox输入内容时下面有提示信息,效果如图所示: private void Form1_Load(object sender, EventArgs e) {     Auto ...

  7. STM32L476应用开发之五：数据保存与SD卡操作

    便携式气体分析仪的特点就是离线运行.尽管是离线运行,但测试数据还是需要的,所以采取方式保存数据就是必须的.在本次项目中我们计划采用SD卡来保存数据. 1.硬件设计 该读卡器整合 SD 卡规范和 FAT ...

  8. Modbus库开发笔记之一：实现功能的基本设计

    Modbus作为开放式的工业通讯协议,在各种工业设备中应用极其广泛.本人也使用Modbus通讯很多年了,或者用现成的,或者针对具体应用开发,一直以来都想要开发一个比较通用的协议栈能在后续的项目中复用, ...

  9. JSP的内置对象及方法

    request表示HttpServletRequest 对象.它包含了有关浏览器请求的信息,并且提供了几个用于获取cookie,header, 和session 数据的有用的方法.response 表 ...

  10. Java代码自动部署

    注:本文来源于<it小熊> [ ①Java代码自动部署-总结简介] 代码部署是每一个软件开发项目组都会有的一个流程,也是从开发环节到发布功能必不可少的环节.对于Java开发者来说,Java ...