javascript - 如何实现鼠标左键在控下状态并且移出div才改变它的内容！-PHP中文网问答

微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

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

伊谢尔伦 2017-04-11 09:40:31

[JavaScript讨论组]

220

<!DOCTYPE html>
<html>

<body>

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

    <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>

伊谢尔伦

小伙看你根骨奇佳，潜力无限，来学PHP伐。

全部回复(1)

ringa_lee2017-04-11 09:42:31 1楼

看你代码现在这种做法不大合适，我们走一遍代码，首先触发了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

添加回复

专题推荐

更多>

热门话题

热门教程

更多>