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

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

　　<!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. Google 的开源技术protobuf 简介与例子

    本文来自CSDN博客:http://blog.csdn.NET/program_think/archive/2009/05/31/4229773.aspx 今天来介绍一下"Protocol  ...

  2. ASP.NET MVC Web API 学习笔记---第一个Web API程序

    http://www.cnblogs.com/qingyuan/archive/2012/10/12/2720824.html GetListAll /api/Contact GetListBySex ...

  3. Spring MVC中使用 Swagger2 构建Restful API

    1.Spring MVC配置文件中的配置 [java] view plain copy <!-- 设置使用注解的类所在的jar包,只加载controller类 --> <contex ...

  4. PHP编译过程中常见错误信息的解决方法

    在CentOS编译PHP5的时候有时会遇到以下的一些错误信息,基本上都可以通过yum安装相应的库来解决.以下是具体的一些解决办法: checking for BZip2 support… yes ch ...

  5. Java事务处理全解析（五）—— Template模式

    在本系列的上一篇文章中,我们讲到了使用TransactionManger和ConnectionHolder完成线程安全的事务管理,在本篇中,我们将在此基础上引入Template模式进行事务管理. Te ...

  6. [MySQL] 忘记root账户密码怎么办

    一.缘由 由于各种原因,我们会忘记mysql的root密码. 二.解决办法 方法一:skip-grant-tables方式启动 1.停止mysql服 务 service mysqld stop 2.以 ...

  7. 堆外内存操作类ByteBuffer

    本篇主要讲解如何使用直接内存(堆外内存),并按照下面的步骤进行说明: 1 相关背景-->读写操作-->关键属性-->读写实践-->扩展-->参考说明 希望对想使用直接内存 ...

  8. htaccess高级应用:防盗链阻止迅雷下载以及限制访问

    导读: 合理利用htaccess文件,即使没有服务器的管理权限可以解决很多问题:比如用htaccess防盗链,阻止迅雷下载,限制用户访问指定类型的文件.判断User-agent阻止迅雷下载. Rewr ...

  9. 用自己的ID在appstore中更新app-黑苹果之路

    由于之前套用了别人的镜像,在appstore中更新XCode时总要输别人id的密码,id还不能改.网上有的说要把XCode删掉,然后再用自己的ID更新,找到另外一个方法,更简单: 1.打开引用程序目录 ...

  10. Windows、VS 与 .net

    原文地址:https://msdn.microsoft.com/en-us/library/bb822049(v=vs.110).aspx .NET Framework version CLR ver ...