如何实现鼠标左键在控下状态并且移出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>

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

【热门文章】