开发者社区> 问答> 正文

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

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

展开
收起
a123456678 2016-03-11 14:31:26 1850 0
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>
    2019-07-17 18:59:16
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载