鼠标点击事件就是当鼠标点击元素时，就会出现另一个窗口，类似于百度首页中右上角的“登录”这个按钮，当鼠标点击

登录时，就会出现登录窗口。大体的意思就是这样，直接上代码了，简单易懂。

　　<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录消失</title>
    <style type="text/css">
    #log{
        width: 100px;height: 30px;
        background: green;
        text-align: center;
    }
    #login{
        margin: 0;padding: 0;
        display: inline-block;
        color: black;
        line-height: 30px;

}
    .qq{
        position: absolute;
        left: 0;top: 0;
        width: 100%;height: 100%;
        background: black;
        opacity: 0.15;
        text-align: right;
    }
    .dian{
        text-decoration: none;
        font-size: 50px;
        width: 150px;
        height: 50px;
        background: white;
        display: block;
        margin: 100px auto 0px;
        color: black;
    }
    </style>
</head>
<body>
    <div id="log">
        <a href="#" id="login">登录</a>
    </div>
    <div class="qq">
        <a href="#" class="dian">×</a>
    </div>

<script type="text/javascript">
    var login = document.getElementById('login');
    var qq = document.getElementsByClassName('qq');
    var dian = document.getElementsByClassName('dian');
    qq[0].style.display = 'none';
    login.onclick = function(){
        qq[0].style.display = 'block';
    }
    dian[0].onclick = function(){
        qq[0].style.display = 'none';
    }

</script>

</body>
</html>

一开始没有点击登录，直接刷新的网页如图：

当点击登录时，页面就会变成这样：

当点击图中的X号时，该页面就会消失，结果就是第一张图片。

JS控制鼠标点击事件的更多相关文章

  1. MacOS获取辅助功能权限控制鼠标点击事件

    昨晚玩一个模拟经营的游戏,由于升级太慢我就不停的种树卖树来换取经验值.不过重复点击10几分钟后,实在受不了.网上本来准备找个鼠标自动点击的软件用用.结果没找到趁手的.如是自己写了个. 自己设置需要点击 ...

  2. js获取鼠标点击事件的相对位置

    <html><head><title>位置</title><script language="javascript" type ...

  3. Js 模拟鼠标点击事件

    var obj = document.getElementById('go'); if(document.all){ obj.click(); }else{ var e = document.crea ...

  4. js控制“鼠标点击按钮后，按钮消失“（可以自己添加video标签控制播放）

  5. JS Event 鼠标拖拽事件

    <!DOCTYPE html><html> <head>        <meta charset="UTF-8">         ...

  6. js/jquery 禁用点击事件

    前言 工作中经常遇到这种情况:验证邮箱页面的重新发送需要在3分钟后才可以点击触发请求,所以在这之前需要禁用他的点击. 网上查了后有以下几种实现方法 1.css禁用鼠标点击事件 .disabled { ...

  7. js触发按钮点击事件

    js触发按钮点击事件 博客分类: javascript   模拟JS触发按钮点击功能 <html> <head> <title>usually function&l ...

  8. css禁用鼠标点击事件

    css禁用鼠标点击事件 .disabled { pointer-events: none; } <div class="main-container disabled"> ...

  9. js中的点击事件（click）的实现方式

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. Spring MVC 4.2 增加 CORS 支持 Cross-Origin

    基于XML的配置: <mvc:cors> <mvc:mapping path="/api/**" allowed-origins="http://dom ...

  2. Parquet文件结构笔记

    Parquet是面向分析型业务的列式存储格式,由Twitter和Cloudera合作开发,2015年5月从Apache的孵化器里毕业成为Apache顶级项目,那么这里就总结下Parquet数据结构到底 ...

  3. Spring技术揭幕----DispatcherServlet

    Spring MVC是一个MVC模式的实现.在Spring MVC的使用中,需要在web.xml中配置DispatcherServlet,也就是说其核心是一个Servlet,这个DispatcherS ...

  4. laravel 指定 版本安装

    composer create-project laravel/laravel=5.0.* --prefer-dist composer create-project laravel/laravel= ...

  5. 【转】C#环形队列

    概述 看了一个数据结构的教程,是用C++写的,可自己C#还是一个菜鸟,更别说C++了,但还是大胆尝试用C#将其中的环形队列的实现写出来,先上代码: 1 public class MyQueue< ...

  6. VC中GBK与UTF8转化

    void ConvertGBKToUtf8(CString& strGBK) {    int len=MultiByteToWideChar(CP_ACP, 0, (LPCTSTR)strG ...

  7. 剑指Offer:面试题23——从上往下打印二叉树(java实现)

    问题描述: 从上往下打印出二叉树的每个节点,同层节点从左至右打印. 思路: 按照层次遍历的方法,使用队列辅助. 1.将根结点加入队列. 2.循环出队,打印当前元素,若该结点有左子树,则将其加入队列,若 ...

  8. javascript--关于错误

    错误是一定会发生,所以语言都会有自己的错误处理机制.javascript的错误处理机制,关乎throw.try.catch. try 语句允许我们定义在执行时进行错误测试的代码块. catch 语句允 ...

  9. 手机app测试框架

    1.冒烟测试 一般使用mokey或其他自动化测试工具进行测试,保证软件的健壮性和可测性. 2.安装.卸装测试 直接在真机上安装.卸装(adb install 或 adb push到手机上直接安装) 第 ...

  10. MFC之动态创建按钮

    打开VS 创建MFC基于对话框的工程,在对话框初始化方法中动态创建一个按钮实例: 1> CButton *pMyButton = new CButton();CEdit *pMyEdit = n ...