如何实现鼠标左键在控下状态并且移出div才改变它的内容!-问答-阿里云开发者社区-阿里云

开发者社区> a123456678> 正文

如何实现鼠标左键在控下状态并且移出div才改变它的内容!

2016-03-11 14:31:26 1299 1
<!DOCTYPE html>
<html>

<body>

    <div id="dv" style="background-color:green;width:120px;
height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div>

    <script>
        var dv = document.getElementById("dv");
        dv.onmousedown = function bs() {
            od();
        }

        function od() {
            dv.onmouseout = function() {
                displayDate()
            };

            function displayDate() {
                dv.innerHTML = Date();
            }
        }
    </script>

</body>

</html>
取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 18:59:16

    看你代码现在这种做法不大合适,我们走一遍代码,首先触发了mousedown事件之后,你就要执行od方法了,而od方法是给dv添加mouseout事件, 那我多点几次,不就给dv绑定了多几次mouseout事件了?

    理一下思路,你可以这样,mousedown事件触发逻辑是:用一个变量来记录鼠标点击了;(比如a=1;)
    mouseout事件触发逻辑是:识别变量(约定好比如 a==1),那么就该干嘛干嘛。

    粗略给一下代码:

    <script>
            var dv = document.getElementById("dv");
            dv.onmousedown = function() {
                var record = dv.getAttribute('data-record');//我把记录变量放到dom属性去了
                if(!record){//属性值木有,那就赋值1咯
                    dv.setAttribute('data-record',1);
                }
            }
            dv.onmouseout = function() {
                    var record = dv.getAttribute('data-record');
                    if(record){//属性值有,说明点击了,那就开始吧
                        displayDate();
                        dv.setAttribute('data-record',0);//这个时候记录值还原咯,给个0也行= =||
                    }
            };
    
            function displayDate() {
                    dv.innerHTML = Date();
                }
            }
        </script>
    0 0
相关问答

3

回答

配置了SSL打开网站却显示此网站无法提供安全连接?

小咩羊 2017-05-22 16:56:14 14246浏览量 回答数 3

4

回答

阿里云域名快速申请免费ssl证书教程

51干警网 2018-12-19 20:54:13 12229浏览量 回答数 4

3

回答

为vsftpd安装&quot;沃通&quot;DV免费SSL证书

dongshan8 2015-10-25 21:41:01 10167浏览量 回答数 3

5

回答

在Windows 2012系统创建IKEv2 VPN远程访问

dongshan8 2016-12-23 19:31:47 21910浏览量 回答数 5

12

回答

[薅阿里云羊毛]免费申请阿里云 - 赛门企业级铁克 SSL 证书!

妙正灰 2016-10-30 13:28:21 36158浏览量 回答数 12

36

回答

申请免费SSL证书 - 阿里云云盾证书 - Digicert+Symantec 免费型DV SSL

dongshan8 2018-01-05 12:07:39 57156浏览量 回答数 36

3

回答

【discuz伪静态】系列之一:主题分类与排序功能伪 静态解决方案

wgrid.cn 2015-05-21 23:28:54 20571浏览量 回答数 3

32

回答

阿里云云虚拟主机终于可以开启原生 HTTPS 访问了

妙正灰 2018-10-03 10:09:08 19708浏览量 回答数 32

23

回答

阿里云万网域名一键签发SSL证书 快捷申请免费SSL证书教程

51干警网 2018-05-28 09:42:34 26596浏览量 回答数 23

3

回答

为Windows 2012系统远程桌面配置赛门铁克免费型DV SSL证书

dongshan8 2016-12-22 18:09:22 10774浏览量 回答数 3
+关注
0
文章
14879
问答
问答排行榜
最热
最新
推荐问答
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载